Breadcrumbs
Hierarchical navigation that shows the current page path with customizable separators and collapse behavior.
Anatomy
- Link items for ancestor pages.
- Current page item with
aria-current="page".
- Separator between items using
data-separator.
- Overflow indicator (
…) for collapsed paths.
Options
| Property | Values | Default |
|---|
| items | Array of { label, url?, current? } | — |
| separator | Any short text separator | / |
| collapse | responsive, always, none | responsive |
| maxItems | Integer ≥ 2 (used by always) | 4 |
Behaviors
- Truncation: Long labels truncate with ellipsis.
- Overflow handling: In collapsed states, middle items are represented by
….
- Responsive collapse: In
responsive mode, middle items collapse on smaller viewports.
- Current page: The current item is rendered as text with
aria-current, not a link.
Keyboard interactions
| Key | Action |
|---|
| Tab | Moves focus through breadcrumb links. |
| Enter | Activates the focused breadcrumb link. |
Accessibility
- Use semantic
<nav aria-label="Breadcrumb"> and ordered list markup.
- Ensure only the active page item uses
aria-current="page".
- Keep link labels concise and meaningful for screen reader users.