Top Bar
The application header, in desktop and mobile variants.
type picks the layout, left supplies the content
type doesn't render a search field or a breadcrumb for you — it sets how the left region is laid out, and you pass the actual component through left. That's why the same bar can hold your router's breadcrumb or your own search input without either being hardcoded here.
Stripping it back
Mobile
TopBarMobile is a separate component rather than a breakpoint on this one, since the two have genuinely different slots. Swap between them at your layout's breakpoint.
TopBar props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'search' | 'breadcrumb' | 'tabs' | 'minimal' | 'chat' | 'search' | What the left region is for. It doesn't render that content — you pass it via left. |
| left | ReactNode | The left region's content: an Input, Breadcrumb, Tabs, or a plain title. | |
| density | 'md' | 'sm' | 'md' | Bar height. |
| showToggle | boolean | true | Shows the sidebar toggle button. |
| onToggle | () => void | Fires from that toggle. | |
| toggleIcon | LucideIcon | PanelLeft | Icon for the toggle. |
| showActions | boolean | true | Shows the built-in help and notification icons. |
| showHelp | boolean | true | Shows the help icon within that group. |
| hasUnread | boolean | false | Puts the unread dot on the notification icon. |
| rightSlot | ReactNode | Your own content, rendered before the built-in icons. | |
| account | ReactNode | The account cluster at the far right, typically an Avatar. |
TopBarMobile props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'title' | 'title-centered' | 'title-action' | 'search' | 'title' | Layout. Centered is the iOS-style title; title-action adds a trailing action button. |
| title | ReactNode | Bar title. | |
| trailing | ReactNode | Trailing slot for the title type, e.g. an Avatar. | |
| search | ReactNode | The search field node, for the search type. | |
| onMenu | () => void | Fires from the hamburger. | |
| onAction | () => void | Fires from the trailing action button. | |
| onClose | () => void | Fires from the close button where the type has one. |