Toolbar & TabBar | ShinyToolbar

ShinyToolbar docks to the top or bottom of its scroll container as an action bar — a leading title (or custom content), trailing icon actions with links/badges, dropdown menu buttons with nested submenus, and an automatic overflow menu for actions that don’t fit. It supports a frosted-glass look via CSS backdrop-filter.

@using Shiny.Blazor.Controls

No service registration is required — it’s a plain Razor component.

Frosted top toolbar — content scrolls under

position: sticky reserves the bar’s height (content starts below it) and content slides under it as you scroll. With Frosted, the content blurs through the glass.

<div style="height: 320px; overflow-y: auto;">
    <ShinyToolbar Dock="ToolbarDock.Top"
                  Frosted="true"
                  Title="Inbox"
                  Items="@items"
                  ItemClicked="OnItemClicked" />

    <!-- tall scrollable content slides under the frosted header -->
    @for (var i = 1; i <= 30; i++)
    {
        <p>Message @i</p>
    }
</div>

@code {
    List<ToolbarItem> items = new()
    {
        new() { Icon = "<svg viewBox='0 0 24 24'>…search…</svg>", Text = "Search" },
        new() { Icon = "<svg viewBox='0 0 24 24'>…bell…</svg>", Text = "Alerts", Badge = "3" },
        new() { Icon = "/icons/compose.png", Text = "Compose", Href = "/compose" }
    };

    void OnItemClicked(ToolbarItem item) { /* … */ }
}

Tip

Icons accept inline SVG/HTML markup, an emoji/glyph, or an image URL (.png / .svg / http… / /…). Items with an Href render as a link (and still raise ItemClicked); items without one render as a button.

Overflow → hamburger menu

When the trailing Items can’t all fit the available width, the ones that don’t are tucked into a dropdown menu behind an overflow (“more”) button. As the bar narrows, items collapse into the menu; as it widens they pop back out. This is on by default — you don’t build the “more” menu yourself.

<ShinyToolbar Dock="ToolbarDock.Top"
              Title="Editor"
              Items="@items"
              MenuBackgroundColor="#1F2937"
              MenuTextColor="#F9FAFB"
              ItemClicked="OnItemClicked" />

Each menu entry mirrors its toolbar item — icon, Text label, and Badge — and raises the same ItemClicked callback (Href items render as links; IsDisabled items are dimmed). A menu button (an item with Children) that lands in the overflow keeps its children and renders as a submenu row there. The menu closes on an outside click, on Escape, or after a selection.

Sizing is measured automatically: a tiny JS module (toolbar.js, shipped with the package and auto-imported) uses a ResizeObserver to measure each item’s intrinsic width and reports back how many fit, reserving room for the overflow button at the boundary.

Note

Only Items collapse. EndContent is pinned beside them and is never folded into the menu, so trailing markup that must always be visible (a status pill, an avatar) belongs there and everything else belongs in Items — actions built as markup are the usual reason a bar “refuses to collapse”. Set OverflowEnabled="false" to opt out entirely.

Customize the affordance with OverflowIcon (inline SVG/HTML — defaults to a hamburger glyph), OverflowText (label under the button when ShowItemLabels is on, default "More"), OverflowAriaLabel (accessible name), and the dropdown’s MenuBackgroundColor / MenuTextColor.

Dropdown buttons & submenus

Give a ToolbarItem a Children list and it becomes a menu button: clicking it opens a dropdown rather than raising ItemClicked, and it grows a caret (DropdownIcon). Children can have children of their own, which fly out as submenus — nested as deep as you need. IsSeparator = true draws a divider between groups.

<ShinyToolbar Dock="ToolbarDock.Top"
              Title="Document"
              Items="@items"
              ItemClicked="OnItemClicked" />

@code {
    List<ToolbarItem> items = new()
    {
        new()
        {
            Icon = "<svg viewBox='0 0 24 24'>…file…</svg>",
            Text = "File",
            Children = new()
            {
                new() { Text = "New", Tag = "file.new" },
                new() { Text = "Open recent", Children = new()
                    {
                        new() { Text = "Roadmap.md", Tag = "open:roadmap" },
                        new() { Text = "Notes.md",   Tag = "open:notes" }
                    }
                },
                new() { IsSeparator = true },
                new() { Text = "Export", Children = new()
                    {
                        new() { Text = "PDF",      Tag = "export.pdf" },
                        new() { Text = "Markdown", Tag = "export.md" }
                    }
                },
                new() { IsSeparator = true },
                new() { Text = "Delete", IconColor = "#EF4444", Tag = "file.delete" }
            }
        },
        new() { Icon = "<svg viewBox='0 0 24 24'>…search…</svg>", Text = "Search", Tag = "search" }
    };

    void OnItemClicked(ToolbarItem item) { /* item.Tag identifies the leaf that was invoked */ }
}

• ItemClicked fires for the leaf that was invoked, never for a parent that only opens a menu. Identify it with Tag — a label is not unique across submenus.
• A separator placed on the bar itself is skipped; it only means something inside a dropdown.
• IsDisabled on a parent stops it opening; on a leaf it dims the row and blocks the click.
• Menus close on an outside click, on Escape, or after a leaf is chosen.

Nothing clips a dropdown

Panels are drawn in the browser’s top layer through the popover API, so a toolbar inside a card, an AppLayoutPanel or any overflow: hidden scroller is not clipped by that ancestor, and no z-index on the page can paint over it. Each panel is placed against its own button, flips to the other side or above when it would run off the viewport, and follows its button when the surrounding scroller moves. Browsers without the popover API fall back to an ordinary absolutely-positioned menu, which is subject to the old clipping rules.

Solid color toolbar with a title

<ShinyToolbar Dock="ToolbarDock.Top"
              BackgroundColor="#7C3AED"
              TextColor="#FFFFFF"
              Title="Dashboard"
              Items="@items" />

Custom content slots

Use StartContent, ChildContent (center), and EndContent for fully custom layouts instead of Title + Items.

<ShinyToolbar Dock="ToolbarDock.Top" BackgroundColor="#0F172A" TextColor="#E2E8F0">
    <StartContent>
        <button @onclick="GoBack">&#x2190;</button>
        <strong>Project Atlas</strong>
    </StartContent>
    <EndContent>
        <Pill Text="Live" PillColor="#10B981" />
    </EndContent>
</ShinyToolbar>

Bottom-docked action bar

<ShinyToolbar Dock="ToolbarDock.Bottom"
              ShowItemLabels="true"
              Items="@actions"
              ItemClicked="OnItemClicked" />

ShinyToolbar properties

Property	Type	Default	Description
Dock	ToolbarDock	Top	Docks to the Top or Bottom edge
Sticky	bool	true	position:sticky (content scrolls under); set false for a normal in-flow bar
Title	string?	null	Convenience leading title text (used when StartContent is not set)
Items	List<ToolbarItem>?	null	Trailing action/link/menu items — the ones that collapse into the overflow dropdown
StartContent	RenderFragment?	null	Custom leading content
ChildContent	RenderFragment?	null	Custom center content
EndContent	RenderFragment?	null	Custom trailing content, pinned beside Items and never collapsed
OverflowEnabled	bool	true	Collapse trailing Items that don’t fit into a hamburger dropdown. Ignored when Items is empty
OverflowIcon	string	hamburger SVG	Inline SVG/HTML for the overflow (“more”) button
OverflowText	string?	"More"	Label shown beneath the overflow button when ShowItemLabels is on
OverflowAriaLabel	string	"More actions"	Accessible label for the overflow button
DropdownIcon	string	chevron SVG	Caret drawn on items that open a dropdown; pass "" to drop it
MenuBackgroundColor	string	#FFFFFF	Dropdown panel background
MenuTextColor	string	#1F2937	Dropdown panel foreground
BackgroundColor	string	#FFFFFF	Solid fill (ignored when Frosted)
TextColor	string	#1F2937	Foreground color
Height	double	56	Bar height (min-height) in pixels
IconSize	double	22	Item icon size in pixels
ShowItemLabels	bool	false	Show each item’s Text beneath its icon
Frosted	bool	false	Frosted glass via backdrop-filter
BlurRadius	double	20	Blur amount in pixels when Frosted
TintColor	string	rgba(255,255,255,0.7)	Translucent fill when Frosted
HasShadow	bool	true	Edge shadow (direction follows Dock)
BorderColor	string?	null	Hairline color on the docked edge
BorderThickness	double	0	Hairline thickness in pixels
SafeArea	bool	true	Adds env(safe-area-inset-*) padding on the docked edge
ZIndex	int	100	Stacking order
CssClass	string?	null	Extra root CSS class
Style	string?	null	Extra inline style appended to the root

Events: ItemClicked — fires the ToolbarItem that was invoked, whether from the bar, the overflow menu or a submenu. Items that only open a dropdown do not raise it.

ToolbarItem properties

Property	Type	Default	Description
Icon	string?	null	Inline SVG/HTML, a glyph/emoji, or an image URL
Text	string?	null	Label (shown when ShowItemLabels is true; always shown inside a dropdown)
Tooltip	string?	null	Tooltip text for the bar button; falls back to Text
Href	string?	null	When set, the item renders as a link to this URL
Target	string?	null	Anchor target (e.g. _blank); only used with Href
Badge	string?	null	Badge text shown on the item (e.g. a count)
IconColor	string?	null	Overrides the toolbar foreground for this item
IsDisabled	bool	false	Dims the item and blocks clicks (a parent will not open)
Children	List<ToolbarItem>?	null	Turns the item into a dropdown; children may nest into submenus
IsSeparator	bool	false	Draws a divider inside a dropdown (skipped on the bar itself)
Tag	object?	null	Arbitrary payload returned via ItemClicked

See also

• ShinyTabBar — the mobile-style bottom tab bar
• Placement & scroll-under — sticky/fixed behavior and the responsive sidebar→tab-bar pattern