Import
import { WrBreadcrumbs, WrBreadcrumbsItem } from 'ngwr/breadcrumbs';Playground
<wr-breadcrumbs separator="/" ariaLabel="Breadcrumbs">
<wr-breadcrumbs-item icon="home" routerLink="/">Home</wr-breadcrumbs-item>
<wr-breadcrumbs-item icon="folder" routerLink="/docs">Docs</wr-breadcrumbs-item>
<wr-breadcrumbs-item routerLink="/docs/components">Components</wr-breadcrumbs-item>
<wr-breadcrumbs-item>Breadcrumbs</wr-breadcrumbs-item>
</wr-breadcrumbs>Customize
Separator
Aria Label
API
| Name | Description | Type | Default |
|---|---|---|---|
<wr-breadcrumbs> | Container — renders <nav aria-label><ol>…</ol></nav>. | component | — |
separator | Glyph rendered between items via CSS ::before. Any short string. | string | '/' |
ariaLabel | Accessible name for the nav landmark. Falls back to the breadcrumbs.label catalog key, then Breadcrumbs. | string | null | null |
<wr-breadcrumbs-item> | Single row. Renders <a> when linked, <span aria-current="page"> otherwise. | component | — |
icon | Optional leading icon (from the wr-icon registry) rendered inline before the label. | WrIconName | null | null |
routerLink | Angular router target. Wins over href. | string | readonly unknown[] | null | null |
href | Plain anchor href. | string | null | null |
external | Open href in a new tab (adds target="_blank" rel="noreferrer noopener"). | boolean | false |
CSS — --wr-breadcrumbs-separator | Override the separator glyph. | string | '/' |
CSS — --wr-breadcrumbs-gap | Spacing between items and separators. | length | 0.5rem |
CSS — --wr-breadcrumbs-link-color | Link colour. | color | var(--wr-color-primary-ink) |
CSS — --wr-breadcrumbs-current-color | Current-page (last) item colour. | color | var(--wr-color-dark) |
CSS — --wr-breadcrumbs-separator-color | Separator glyph colour. | color | rgba(var(--wr-color-dark-rgb), 0.3) |
CSS variables
Custom properties ngwr/breadcrumbs publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-breadcrumbs-color | rgba(var(--wr-color-on-surface-rgb), 0.6) | .wr-breadcrumbs |
--wr-breadcrumbs-current-color | var(--wr-color-on-surface) | .wr-breadcrumbs |
--wr-breadcrumbs-gap | 0.5rem | .wr-breadcrumbs |
--wr-breadcrumbs-link-color | var(--wr-color-primary-ink) | .wr-breadcrumbs |
--wr-breadcrumbs-separator | '/' | .wr-breadcrumbs |
--wr-breadcrumbs-separator-color | rgba(var(--wr-color-on-surface-rgb), 0.3) | .wr-breadcrumbs |