Breadcrumb
A trail of ancestor links showing the user’s current location within a hierarchy of pages.
API
All inputs and configuration options for zyra-breadcrumb.
| Prop | Type | Default | Description |
|---|---|---|---|
ariaLabel (zyra-breadcrumb) | string | 'Breadcrumb' | Accessible label for the nav landmark |
href (zyra-breadcrumb-item) | string | '' | Destination URL; ignored when current is true |
current (zyra-breadcrumb-item) | boolean | false | Marks the item as the current page — renders without a clickable href |
Tokens
CSS custom properties zyra-breadcrumb reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Link text--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Color of non-current, non-hovered link items. |
Link text (hover)--zyra-color-primary | var(--zyra-color-accent) | Color of a link item on hover. |
Current item text--zyra-color-foreground | var(--zyra-color-text) | Color of the current-page item, and of a link item while focused. |
Separator--zyra-color-foreground-subtle | var(--zyra-color-text-dim) | Color of the decorative separator between items. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Rendered as a <nav> landmark with an ol/li list structure
- The current item gets aria-current="page" and no href, so it is not focusable
- Separator icons are aria-hidden and purely decorative