Breadcrumb
Shows the current page's place in the hierarchy with links back to its ancestors.
@garn/ui/breadcrumbDefault
Home / Components / current page.
Installation
garn is copy-in — the garn CLI writes this component's source into your project, so you own and can edit it. It resolves any base files and installs the npm dependencies below for you.
npx garn-ui add breadcrumb- Registry
breadcrumb- Source
- breadcrumb.tsx
- Deps
@radix-ui/react-slotlucide-react- Registry deps
utils
Import
import { Breadcrumb } from "@garn/ui/breadcrumb";Props
Generated from the component's TypeScript types.
No component-specific props — this is a thin wrapper over its native element.
Styling
Target these data-slots and remap these tokens to restyle without forking the component.
[data-slot="breadcrumb"]| Property | Token | Tier |
|---|---|---|
itemGap | --garn-gap-field | semantic · air |
ellipsisSize | --garn-control-h-sm | semantic · air |
Overview
Breadcrumb shows where the current page sits in a hierarchy and lets users jump back to an ancestor. Breadcrumb is the nav landmark, BreadcrumbList the ordered trail, BreadcrumbLink each ancestor link (asChild to wrap a router Link), and BreadcrumbPage the current page — rendered as text with aria-current, not a link. It's a secondary wayfinding aid for deep hierarchies; for primary navigation use NavigationMenu, and for a multi-step task use a Stepper.
Guidelines
Use breadcrumbs only for genuine hierarchy. They earn their place when pages nest several levels deep; on a flat site they're noise. Mirror the real structure, root to current, so the trail matches how users got there.
The last crumb is the page, not a link. Render the current location as BreadcrumbPage (non-interactive, aria-current="page") and make every ancestor a working link. Keep labels short and consistent with the page titles.
Collapse long trails gracefully. When the path is deep, truncate the middle into an ellipsis/menu rather than wrapping across lines, while keeping root and current visible. Keep it a supporting aid — don't make it the only way to navigate up.
Best practices
- Mark the current page with BreadcrumbPage (it sets aria-current="page").
- Wrap your router's Link with BreadcrumbLink
asChildfor client navigation. - Collapse long trails with BreadcrumbEllipsis instead of wrapping to many lines.
- Don't make the current page a link.
- Don't use breadcrumbs as the only navigation.
- Don't add a separator as a real list item — it's decorative.
Content guidelines
- Use each crumb's real page title, shortened consistently when it's long.
- Keep the current page as plain text, phrased the same way as the page's own title.
Accessibility
- Role
navigation- ARIA APG
- breadcrumb
Keyboard
| Tab | Move between the ancestor links. |
- • The root <nav> is labeled "breadcrumb" so it's a distinct landmark.
- • The current page is BreadcrumbPage (aria-current="page"), not a link.
- • Separators and the ellipsis are aria-hidden / role=presentation — they're decorative.
- Status
- Stable
- Version
v0.3.0- Introduced
v0.1.0
garn doesn't yet record a per-release version history. This reflects the component's current lifecycle state; full changelog entries will appear once the metadata pipeline emits a lifecycle.history field.