Toolbar & TabBar (Blazor Only)

Two screen-docked navigation chromes for Blazor:

• ShinyToolbar docks to the top or bottom of its scroll container as an action bar (icons with links/actions, a title, and custom content slots) — trailing actions that don’t fit collapse into a hamburger overflow menu automatically.
• ShinyTabBar is a mobile-style tab bar pinned to the bottom of the viewport with a selected state, optional filled active icons, and badges.

Both support a frosted-glass toggle backed by CSS backdrop-filter. The top toolbar uses position: sticky, so it reserves its own height — content never starts underneath it — yet page content scrolls under it as you scroll, producing the classic translucent-header effect. The tab bar uses position: fixed, so it stays pinned regardless of scroll.

• 

Frameworks

Blazor

Note

ShinyToolbar and ShinyTabBar are only available in the Blazor package. On MAUI, use Shell tab bars / ToolbarItems, or FloatingPanel for docked overlays.

Setup

@using Shiny.Blazor.Controls

No service registration is required — both are plain Razor components.

ShinyToolbar Docked action bar: title, action items, overflow menu, custom slots.

ShinyTabBar Mobile-style bottom tab bar: selection, active icons, badges.

Placement & scroll-under

position: sticky sticks relative to the nearest scroll container, and any ancestor with overflow: hidden silently breaks it (and clips the toolbar’s overflow dropdown) — use overflow: clip if you must clip an axis.

For app-wide chrome, place ShinyToolbar as the first element of your page/layout scroll area and drop ShinyTabBar anywhere (it’s Fixed). A common responsive pattern is a sidebar on desktop that gives way to a bottom ShinyTabBar on narrow viewports:

<main class="content">
    <ShinyToolbar Dock="ToolbarDock.Top" Frosted="true" Title="My App" />

    <div class="content-inner">
        @Body
    </div>

    <ShinyTabBar CssClass="mobile-tabbar" Items="@tabs" SelectedKey="@CurrentKey" />
</main>

/* hidden on desktop; shown on narrow screens (::deep reaches the child component root) */
.content ::deep .mobile-tabbar { display: none; }

@media (max-width: 820px) {
    .sidebar { display: none; }
    .content ::deep .mobile-tabbar { display: block; }
    .content-inner { padding-bottom: calc(56px + env(safe-area-inset-bottom) + 16px); }
}

Note

Colors are CSS strings. Two-way binding on the tab bar uses the SelectedKey / SelectedKeyChanged pattern (@bind-SelectedKey). Custom toolbar content uses Blazor RenderFragment slots (StartContent / ChildContent / EndContent).

AI Skill

Claude Code GitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install controls@shiny

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install controls@shiny

View controls Plugin