Navigation
Breadcrumb
Where this page sits, and the way back out — collapsing in the middle when the trail is deep.
Breadcrumb
import { Breadcrumb } from '@anomalia/ui'; Notes
- An ordered list inside a labelled
nav, which is the structure assistive tech expects to find. The last crumb is text witharia-current="page", not a link to where you already are. - Separators are generated by CSS and hidden from assistive tech, so nobody hears "slash" four times.
- Past
collapseAfterthe middle folds into a "…" button: origin and position are the two crumbs a reader actually uses, and a deep trail otherwise wraps into a paragraph of grey text on a phone.
Examples
Trail
The last crumb is text with `aria-current="page"`, not a link to where you already are. Past `collapseAfter` the middle folds into a button — origin and position are the two crumbs a reader uses.
API
| Prop | Type | Default | Description |
|---|---|---|---|
items | Crumb[] | — | `{ label, href? }`. The last entry is the current page. |
collapseAfter | number | 4 | Trail length that triggers the fold. |
label | string | 'Breadcrumb' | Accessible name for the nav. |
Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.