Breadcrumb
StableShows where the current page sits in the library hierarchy and links back to each level above it.
When to use
Use it for
- Pages two or more levels deep in a hierarchy: a token inside a group, a component inside a family.
- At the top of the page, above the page title.
- maxItems on deep paths so the trail stays on one line; the middle levels stay one click away.
Not for
- Flat sites or the top level: there is nothing to go back up to.
- Showing the steps of a flow: use a stepper. A breadcrumb shows location, not progress.
- As the only navigation: it complements SidebarNav, it does not replace it.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Mirror the hierarchy, not the history
Each item is a parent of the next, whatever route the user took to get here.
Linking the current page
The last item is where the user already is. It is text with aria-current, not a link.
Accessibility
- A nav landmark named "Breadcrumb" (override with aria-label), with an ordered list inside.
- The last item has aria-current="page".
- Separators are icons hidden from assistive tech, so screen readers only read the levels.
- The collapse button is named "Show N more levels" and expands the trail in place.
- Truncated labels keep the full text in the title attribute and in the accessible name.
Anatomy and tokens
Read from packages/react/src/components/Breadcrumb/Breadcrumb.module.css at build time. Every value is a token: open one to see its
alias chain in both themes.
- Navigation landmark
.breadcrumb - Ordered list
.list - Level
.item - Ancestor link
.link, .current - Ancestor link
.link - Ancestor link, hover
@media (hover: hover) .link:hover - Current page
.current - Separator icon
.separator - Collapse button
.ellipsis - Collapse button, hover
@media (hover: hover) .ellipsis:hover - Collapse button, focus
.ellipsis:focus-visible
Props
Parsed from the TypeScript types in packages/react/src/components/Breadcrumb/Breadcrumb.tsx, so this table cannot drift from the
code.
| Prop | Type | Default | Description |
|---|---|---|---|
items required | BreadcrumbItemData[] | none | Path from the top of the hierarchy to the current page. The last item is marked as the current page. |
maxItems | number | none | Accessible name of the navigation landmark. Default "Breadcrumb". */ 'aria-label'?: string; /** Collapse long paths: keep the first item and the last `maxItems - 1`, hide the middle behind a "Show path" button. Default: no collapsing. |
Playground
Breadcrumb has no typed options to play with: it is a container. Compose it with other components and any native attribute. Here it is in both themes.
Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Breadcrumb in Storybook) .
Embed Storybook stories here (4)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay
empty.
Default
Collapsed
LongLabels
AllStates
Changelog
- New
Navigation: Tabs (underline with a sliding signal indicator, contained, icons, counts, vertical), Breadcrumb (aria-current, collapsing middle levels), Pagination (full and compact, getPageItems helper) and SidebarNav (sections, collapsible groups, counts, current page mark).
Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026