Breadcrumbs
Where you are. nav + ol. Current is text, not a link.
Spec
- Landmark:
<nav aria-label="Breadcrumb">wrapping<ol>. - Current:
aria-current="page", text, not an<a>. - Icons are consistent — home is home, not a random glyph.
- Separator is
chevron-inline-end. RTL flips it with the inline axis. Do not rotate a down chevron. - Collapse the middle to a “more” control when the trail does not fit.
- Disabled crumbs are not links.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
nav + ol, current is text, middle collapses
Do / Don't
| Do | Don't | |
|---|---|---|
| Current as text with aria-current. | Current as a link to here. | |
chevron-inline-end separators. | Slash, chevron-down, or a caret ` | `. |
| Collapse the middle. | Truncate the current page name first. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
transform: scale(0.97) | 120ms --dur-fast | --ease-out | :active | instant |
| color / border | 120ms --dur-fast | --ease-out | :hover | instant |
| outline | 80ms --dur-micro | --ease-out | :focus-visible | instant |
The more-menu follows Dropdown.
Accessibility
- Landmark name: “Breadcrumb”.
- Keyboard: links are native. More is a button that opens a menu.
- Separator icons are
aria-hidden. - These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.