Navigation
Breadcrumbs
Shows where the current page sits in the hierarchy and offers one-click hops back up — workspace, project, task. Collapses gracefully when the trail is long or the space is tight.
npx shadcn@latest add @orbit/breadcrumbsOverview
Hover the crumbs — parents are links, the current page is bold and inert.
Separators
Three styles for the divider between levels. chevron is the default.
Icons & sizes
Per-level icons add scannability — a home, a folder, a task. The final crumb is the current page: bold and non-interactive.
Collapsing long trails
Set maxItems to cap the visible count. The middle levels fold into a “…” button that reveals them in a menu — the root and current page always stay. Click the “…” to reveal the collapsed levels in a popover.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BreadcrumbItem[] | — | Trail from root to the current page: { label, href?, icon?, render? }. Pass render={<Link href=…/>} to integrate router links — the crumb's classes and content merge onto it. |
| separator | "chevron" | "slash" | "dot" | "chevron" | Divider drawn between levels (text-faint). |
| size | "sm" | "md" | "md" | Crumb height 24px (sm) / 26px (md), 12.5 / 13.5px labels. |
| maxItems | number | 0 | Cap on visible crumbs; 0 never collapses. When over budget, the first crumb stays, the middle folds into a “…” menu, and the last maxItems − 2 crumbs stay. |
| showRootIcon | boolean | true | Hide the first crumb's icon when false. |
| …rest | HTMLAttributes | — | Everything else is forwarded to the root <nav>, including ref. |
Usage
Breadcrumbs orient; they're a secondary aid, not the primary nav.
Mirror the real hierarchy
Each crumb should be a true parent of the next so the path is predictable.
Make the current page a link
The last crumb is where you already are — show it bold and inert.
Collapse long trails
Past four or five levels, fold the middle into a “…” menu to keep one line.
Replace primary navigation
Breadcrumbs supplement the nav; they aren't a substitute for it.
Keyboard & accessibility
A semantic nav landmark wrapping an ordered list. Tab moves across the links; the “…” button opens an ARIA menu (arrow keys, Escape closes).