Navigation
Top bar
The horizontal counterpart to the Sidebar — together they make the app shell. A global bar carries the nav toggle, breadcrumb, command search, notifications, quick-create and account; an optional page bar underneath holds the view title, tabs and view-level actions.
npx shadcn@latest add @orbit/top-barOverview
A live two-tier bar inside an app frame. Open the bell for notifications, the New split-button, search, or the avatar; switch view tabs and try Filter / Sort / ⋯ in the page bar. With focus in the bar, ⌘/Ctrl+K opens search and ⌘/Ctrl+B flips the sidebar toggle.
Anatomy
Two tiers: a stable global bar sits above a page bar that changes with the current view. The global bar keeps the same controls on every screen — toggle and breadcrumb on the left, command search in the center, notifications, New and the account avatar on the right. The page bar holds the view's title and status, the view-switch tabs, and view-level actions. It's optional — drop it on screens that don't need view switching.
Variants
Composition reshapes the bar: leave out the page-bar row for a global bar only, drop the search slot, or switch the root to compact density — 48/40px rows with 28px controls for tool-dense screens. Each instance below is fully live.
Props
The bar is assembled from parts; density flows from the root so every part resizes together. Popovers are compositions — anchor Menu, Avatar, Badge and Button from the registry to these slots.
| Prop | Type | Default | Description |
|---|---|---|---|
| <TopBar> density | "comfortable" | "compact" | "comfortable" | 56/46px rows with 32px controls, or 48/40px rows with 28px controls. |
| <TopBar> sticky | boolean | false | Pin to the top of the scroll container with a translucent blur backdrop. |
| <TopBarRow> tier | "global" | "page" | "global" | The stable app-wide bar, or the per-view page bar underneath. |
| <TopBarSection> side | "start" | "end" | "start" | Flexible leading / trailing group (flex 1, min-width 0). |
| <TopBarIconButton> badge | number | string | — | Unread-count pill pinned to the corner (hidden at 0) — e.g. the bell. |
| <TopBarSearch> placeholder / shortcut | string / string | null | "Search…" / "⌘K" | Command-search trigger styled as a field; wire it to a Menu or the Command Palette. |
| <TopBarBreadcrumbItem> current / href | boolean / string | — | Current location gets emphasis and aria-current; href renders a link. Ancestors truncate first. |
| <TopBarTitle> status | ReactNode | — | Trailing status slot next to the view title — e.g. a Badge pill. |
| <TopBarTab> active | boolean | false | The active view — 2px brand underline, emphasized label, aria-current. |
| <TopBarActionButton> icon / count | ReactNode / number | — | Leading 16px glyph and an applied-count pill (hidden at 0), e.g. active filters. |
| Parts | components | — | TopBarRow, TopBarSection, TopBarDivider, TopBarBreadcrumbs(+Item/Separator), TopBarSearch, TopBarIconButton, TopBarTitle, TopBarTabs/Tab, TopBarActions/ActionButton. |
Usage
The top bar orients and gives global reach; the Sidebar carries primary navigation. Keep their toggle in sync and don't duplicate destinations between them.
Keep the global bar stable
Same controls on every screen. Only the page bar below changes per view, so people always know where the essentials live.
Crowd it with every action
Promote two or three actions to the page bar; push the rest into the ⋯ overflow or onto the page itself.
Sync the toggle with the Sidebar
One control collapses the nav rail, mirrored by ⌘B. The bar and the Sidebar are two halves of one shell.
Duplicate the view tabs in the nav
Pick a single home for switching Board / List / Timeline — the page bar — so selection never disagrees with itself.
Keyboard & accessibility
Every control is a real button with the themed 3px focus ring; the breadcrumb is a labeled <nav> with aria-current on the current crumb, the active view tab sets aria-current, the bell's unread count is visible text, and popovers built on Menu bring roving focus, typeahead, and Escape-to-close.