Breadcrumb
Preview appears after the next Storybook update.
<Breadcrumb />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.
Content guidelines
- Use the same names as the page titles they point to.
- Sentence case, no punctuation.
- Do not repeat the product or app name as the first item unless it is a real level.
From the code Generated from the component, not editable here.
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
Motion and interaction
Breadcrumb animates on hover. Try it in the preview at the top.
| When | What changes | Duration | Easing |
|---|---|---|---|
| Hover | Text color and underline | motion.duration.instant75 ms | motion.easing.standardsettles in place |
With reduced motion turned on, every change happens at once.
From the code Generated from the component, not editable here.
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 |
|---|---|---|---|
itemsrequired | 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
From the code Generated from the component, not editable here.
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)
v1.0.0, Nov 11, 2026
- New
Studio branch review, redesigned: a breadcrumb (Branches, its product group, the title), the title with its status, and one line saying who asks and why
v1.0.0, Nov 11, 2026