# Breadcrumbs

> Navigation trail showing the user's location in the site hierarchy. `<wr-breadcrumbs-item>` renders as a `<li>` containing either an `<a>` (when linked) or a `<span aria-current="page">` (the final crumb). Separator is a CSS pseudo-element so it doesn't pollute the accessibility tree. Each item accepts an optional leading icon.

Source: https://ngwr.dev/reference/components/breadcrumbs  
Kind: Component

## Import

```angular-ts
import { WrBreadcrumbs, WrBreadcrumbsItem } from 'ngwr/breadcrumbs';
```

## Playground

```html
<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>
```

## 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` |