Breadcrumb
Shows the current location in a hierarchy.
Default
Ancestors are BreadcrumbLinks in quaternary text with a neutral-100 hover. The current page is a BreadcrumbPage in primary text. Pass render={<Link href />} to use your router's link.
Current page only
A top-level page shows only its own name, so the header keeps the same height as nested pages.
Collapsed
Paths deeper than three levels collapse the middle into a BreadcrumbEllipsis that opens the hidden levels in a Dropdown.
Custom separator
BreadcrumbSeparator renders a chevron by default. Pass children to replace it.
With agent
On an agent page, the last crumb is the agent with an environment switcher beside it.
Best practices
When to use
- Use when people move through a clear parent-child hierarchy, such as Workspace › Project › Agent › Settings, especially after a deep link.
- Do not use Breadcrumb as primary navigation or to show steps in a task; use Tabs for peer views and Stepper for sequences.
Behavior
- Ancestors are BreadcrumbLinks; the last item is always a BreadcrumbPage and is not a link.
- Pass render={<Link href />} to BreadcrumbLink to use the app router.
- Collapse paths deeper than three levels: keep the root and the last two levels, and put the middle in a BreadcrumbEllipsis that opens a Dropdown of the hidden levels.
- A top-level page still renders a one-item Breadcrumb so the header height matches nested pages.
Content
- Use the entity's stable name (“Support line”, not “Agent 3”). Middle-truncate long identifiers without hiding the current page.
- Keep the default chevron separator; only pass custom separator children for a path-like context such as “/”.
Accessibility
- Breadcrumb renders a nav landmark and BreadcrumbPage sets aria-current="page"; do not add a second nav around it.
- BreadcrumbEllipsis carries its own label; keep it when you swap the trigger.