Breadcrumb
Shows the current page location within a navigation hierarchy
Category: navigation · WCAG 2.2-AA · breadcrumb, navigation, hierarchy
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { label: string; href?: string }[] | — | The items to render. |
maxVisible | number | — | When items exceed this count, collapse to the first item, an ellipsis, and the trailing items |
className | string | — | Additional CSS class names merged onto the root element. |
ariaLabel | string | Breadcrumb | Accessible label for the component. |
Design tokens
--cascivo-color-text--cascivo-color-text-muted--cascivo-color-text-subtle--cascivo-radius-sm--cascivo-focus-ring
When to use
- Showing the user where the current page sits in a navigation hierarchy
- Providing one-click navigation back to ancestor pages
- Collapsing deep trails to keep the trail compact (maxVisible)
When not to use
- Paging through data records — use Pagination
- Switching between sibling views — use Tabs
How to build an accessible Breadcrumb in React →
Examples
Basic
<Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Docs', href: '/docs' }, { label: 'Breadcrumb' }]} />Collapsed
Long trails collapse to the first item, an ellipsis, and the trailing items.
<Breadcrumb maxVisible={3} items={[{ label: 'Home', href: '/' }, { label: 'Docs', href: '/docs' }, { label: 'Components', href: '/docs/components' }, { label: 'Breadcrumb' }]} />Related components
- Pagination — Pagination moves through data pages; Breadcrumb moves up a hierarchy