Breadcrumb
Shows where the current page sits, and gives one-click access back up the tree.
The last crumb isn't a link
Omit href on the final item. It's the page you're already on, so linking it just gives people a control that appears to do nothing.
Variants
text disappears into a page header; button gives each crumb a hit area worth aiming at, which reads better in a dense app toolbar.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label: string; href?: string }[] | The trail, root first. Leave href off the last item so the current page isn't a link to itself. | |
| variant | 'text' | 'button' | 'text' | Plain links, or each crumb in its own pill. |
Why it works this way
Why
- The last item is treated as the current page and is not a link, so the trail never links back to where you already are.
Don't
- Don't use it as the only navigation. It shows where you are, not everything you can reach.
- Don't use it for a flat page with no hierarchy.