A trail back up the hierarchy, one hop at a time.
| Prop | Type | Notes |
|---|---|---|
| Item href / current | string / boolean | Link, or the non-clickable current page |
| maxItems | number | Collapse the middle into a … dropdown past this |
| separator | chevron · slash · arrow · dot | Glyph between crumbs |
| siblingMenus | boolean | A caret on each crumb opens its sibling pages |
| showIcons | boolean | Leading home / folder glyphs |
| aria-current | page | Set on the last crumb for assistive tech |
Breadcrumbs show where a page sits in the hierarchy. For switching peer views use Tabs; for primary wayfinding use the nav.
Mark the current page as bold and non-clickable.
Don't print a deep path in full. Collapse the middle to a … menu.
Keep the first and last, collapse the rest behind a … dropdown.
Don't let one crumb sprawl. Truncate it with an ellipsis.
Above a page title, showing where you are.
A file or folder path in an editor or browser.
A deep hierarchy kept to one honest line.
| Token | Value | Role |
|---|---|---|
| --bc-item | #9AA0A8 | Crumb link colour |
| --bc-current | #F4F5F6 | Current page, weight 500 |
| --bc-sep | #3A3C42 | Separator glyph |
| --bc-hover | rgba(255,255,255,.04) | Crumb hover fill |
| --bc-trunc | 150px | Max width before a crumb truncates |
| --bc-radius | 6px | Crumb hit-area corner |
<nav class="o-bc" aria-label="Breadcrumb"> <a class="o-bc__item" href="/">Home</a> <span class="o-bc__sep">›</span> <a class="o-bc__item" href="/components">Components</a> <span class="o-bc__sep">›</span> <span class="o-bc__item is-current" aria-current="page">Avatar</span> </nav>