Breadcrumb
stable 1.2 kB<hk-breadcrumb>A route trail that collapses its middle when space runs out, keeping the root and the last two crumbs — the ones people actually navigate by. Three presentations share that one rule: plain separators, icon chevrons with the root reduced to its glyph, or a segmented path bar.
#trail#router
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| items | HkCrumb[] | [] | Trail, root first. Each carries a label and an optional routerLink. |
| maxVisible | number | 4 | Crumbs shown before the middle collapses behind an ellipsis. |
| variant | 'slash' | 'chevron' | 'pills' | 'slash' | Plain separators, icon chevrons with the root reduced to its glyph, or a segmented path bar. |
| separator | string | '/' | Character drawn between crumbs. Ignored by chevron and pills. |
| icons | boolean | false | Renders each crumb's icon. On by default under the chevron variant. |
Outputs
navigateEventEmitter<HkCrumb>Emits when a crumb is activated.
Keyboard
- Tab Moves through crumbs
- Enter Follows the crumb
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-crumb-separator | #94a3b8 | Separator colour. |
| --hk-crumb-active | #0f172a | Colour of the final crumb. |
Accessibility
- Wrapped in nav[aria-label="Breadcrumb"] with the current page marked aria-current="page".
- The ellipsis is a button that expands the trail, not inert text.