Breadcrumb
A path trail showing the user's location within a hierarchy, with links back to ancestors and a non-interactive current page.
Standard
Truncated (ellipsis)
Custom separator
Installation
pnpm dlx @hex-core/cli add breadcrumbAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes on the nav element |
AI Guidance
When to use
Use to show location within a hierarchical site or app: docs pages, product categories, nested settings. Include the current page as a non-link BreadcrumbPage.
When not to use
Don't use for primary navigation (use NavigationMenu). Don't use for flat sites without hierarchy. Don't use when the hierarchy is too deep to display — truncate with BreadcrumbEllipsis.
Common mistakes
- Making the current page a link (use BreadcrumbPage)
- Showing just one item (defeats the purpose)
- Using plain text separators without aria-hidden
Accessibility
Root <nav aria-label='breadcrumb'> creates a landmark. BreadcrumbPage has aria-current='page'. Separators are aria-hidden (decorative). BreadcrumbEllipsis is decorative (SVG aria-hidden) with a sr-only 'More pages' label.
Related components
Token budget: 400