Toolbar & TabBar | ShinyTabBar

ShinyTabBar is a mobile-style tab bar pinned to the bottom (or top) of the viewport with a selected state, optional filled active icons, badges, and a frosted-glass option. It uses position: fixed by default, so it stays pinned regardless of scroll.

@using Shiny.Blazor.Controls

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

Bottom tab bar with selection and badges

Two-way bind SelectedKey for the active tab. Give an item an ActiveIcon for a filled selected state, and a Badge (use "" for a plain dot).

<ShinyTabBar Items="@tabs"
             @bind-SelectedKey="selected"
             ActiveColor="#7C3AED"
             Frosted="true" />

@code {
    string? selected = "home";

    List<TabBarItem> tabs = new()
    {
        new() { Key = "home", Label = "Home", Icon = HomeOutline, ActiveIcon = HomeFilled },
        new() { Key = "search", Label = "Search", Icon = SearchIcon },
        new() { Key = "chat", Label = "Chat", Icon = ChatIcon, Badge = "5" },
        new() { Key = "profile", Label = "Profile", Icon = ProfileIcon, Href = "/profile" }
    };
}

Tip

When an item has an Href, selecting it also navigates there. To highlight the active tab from the current route, bind SelectedKey to a value derived from NavigationManager instead of (or in addition to) @bind-SelectedKey.

Icon-only, solid background

<ShinyTabBar Items="@tabs"
             @bind-SelectedKey="selected"
             ShowLabels="false"
             BackgroundColor="#0F172A"
             ActiveColor="#38BDF8"
             InactiveColor="#64748B" />

ShinyTabBar properties

Property	Type	Default	Description
Items	List<TabBarItem>?	null	The tabs
SelectedKey	string?	null	Two-way bindable active tab Key (pair with SelectedKeyChanged)
SelectedKeyChanged	EventCallback<string?>	—	Fires when the selected tab changes
Dock	ToolbarDock	Bottom	Docks to the Bottom (default) or Top edge
Fixed	bool	true	position:fixed (always pinned); set false to use sticky inside a container
BackgroundColor	string	#FFFFFF	Solid fill (ignored when Frosted)
ActiveColor	string	#2196F3	Selected tab color
InactiveColor	string	#9CA3AF	Unselected tab color
ShowLabels	bool	true	Show each tab’s Label beneath its icon
Height	double	56	Bar height (min-height) in pixels
IconSize	double	24	Tab icon size in pixels
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-bottom) padding (home-indicator clearance)
ZIndex	int	100	Stacking order
CssClass	string?	null	Extra root CSS class
Style	string?	null	Extra inline style appended to the root

Events: SelectedKeyChanged (two-way bind via @bind-SelectedKey), ItemClicked — fires the tapped TabBarItem.

TabBarItem properties

Property	Type	Default	Description
Key	string?	null	Stable identifier used for selection
Icon	string?	null	Inline SVG/HTML, a glyph/emoji, or an image URL (shown when inactive)
ActiveIcon	string?	null	Optional filled variant shown when the tab is selected
Label	string?	null	Label beneath the icon (hidden when ShowLabels is false)
Href	string?	null	When set, selecting the tab also navigates here
Badge	string?	null	Badge text; an empty string "" renders a dot
IsDisabled	bool	false	Dims the tab and blocks selection
Tag	object?	null	Arbitrary payload returned via ItemClicked

See also

• ShinyToolbar — the docked action bar
• Placement & scroll-under — the responsive sidebar→tab-bar pattern