Navigation
Breadcrumb
Where you are, as a path.
Examples
default
Notes
Where you are, as a path.
The last crumb is plain text with aria-current="page" rather than a link to itself — a self-link is the most common breadcrumb bug, and it makes a screen reader offer a navigation that goes nowhere.
Separators live in <li aria-hidden> so the trail is read as its items and not as "home slash work slash".
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | Crumb[] | — | |
| label | string | 'Breadcrumb' | Names this trail when a page has more than one. |
| separator | ReactNode | '/' | Rendered between crumbs. A slash by default; it is decorative either way. |
Also accepts everything in HTMLAttributes<HTMLElement>. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- The last crumb is text with aria-current="page", never a link to itself.
- Separators are aria-hidden, so the trail is not read as “home slash work slash”.