Topbar
v1.0.10Updated 27 Aug 2026Persistent app-level top bar with breadcrumb / page title slot, action buttons, and user menu.
Preview
Live · 12 storiesDefaultOpen ↗
▸Why this is recommendedheadertopbarnavbarshell+1
The default, out-of-the-box Topbar.
Recommended for+14
- ✓Top of every AppShell-wrapped page
Tags+6
headertopbarnavbarshelldefault
Features+4
- Breadcrumb slot
- Action button slot
- User avatar + dropdown
- Search slot (⌘K)
- Sticky
- i18n: labels prop overrides every built-in UI string (workspace switcher, search palette, create menu, app launcher, notifications, user menu, aria-labels); merged over DEFAULT_TOPBAR_LABELS
Not recommended for−2
- ✕In-page section headers (use PageHead)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
titlePage title
—actionsRight-aligned actions
—labelsOverride any built-in UI string — workspace switcher, search palette, create menu, app launcher, notifications, user menu, aria-labels (i18n). Merged over DEFAULT_TOPBAR_LABELS; {count} template for the unread-bell aria-label
—