Breadcrumb Atom
Where you are, and the way back up. Server-safe.
Usage
<Breadcrumb items={[ { label: 'Workspace', href: '/' }, { label: 'Billing', href: '/billing' }, { label: 'INV-1043' },]} />The last crumb is not a link
It is text carrying aria-current="page". A link to the page you are already on is a dead end —
it looks actionable, it consumes a tab stop, and it does nothing.
Longer trails collapse in the middle rather than wrapping onto a second line: the first crumb and the last two are what people actually use.
Do
Mirror the real hierarchy, so the trail is a way up and not a history of clicks.
Don't
Use breadcrumbs as a back button — the previous page is often not the parent.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| items | Crumb[] | — | label plus an optional href or onClick. The last one is rendered as the current page. |
| maxItems | number | 4 | Past this, the middle collapses to an ellipsis. |