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, 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). The menu closes on an outside click 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.

Caution

The toolbar root is overflow: visible so the dropdown can escape the bar — don’t wrap it in an overflow: hidden ancestor or the menu gets clipped (use overflow: clip if you must clip an axis). Overflow is automatically disabled when you supply your own EndContent (you own the trailing region then); 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.

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 items (used when EndContent is not set)
StartContent	RenderFragment?	null	Custom leading content
ChildContent	RenderFragment?	null	Custom center content
EndContent	RenderFragment?	null	Custom trailing content (disables overflow)
OverflowEnabled	bool	true	Collapse trailing Items that don’t fit into a hamburger dropdown. Ignored when EndContent is set or 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
MenuBackgroundColor	string	#FFFFFF	Overflow dropdown background
MenuTextColor	string	#1F2937	Overflow dropdown 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 tapped, whether from the bar or the overflow menu.

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)
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
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