import { Component } from '@angular/core';
import { WrBreadcrumbs, WrBreadcrumbsItem } from 'ngwr/breadcrumbs';
@Component({ imports: [WrBreadcrumbs, WrBreadcrumbsItem] })
export class MyComponent {}Breadcrumbs
Shows where the current page sits in the site.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Playground
An item with no routerLink or href is the current page.
<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 | Short string drawn between items. | string | '/' |
ariaLabel | Name of the nav landmark. Falls back to breadcrumbs.label. | string | null | null |
<wr-breadcrumbs-item> | One item: .wr-breadcrumbs__link when linked, .wr-breadcrumbs__current (aria-current="page") when not. | component | — |
icon | Leading icon from the icon registry. | 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 variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/breadcrumbs's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-breadcrumbs-color | color-mix(in srgb, var(--wr-color-on-surface) 60%, transparent) | .wr-breadcrumbs |
--wr-breadcrumbs-current-color | var(--wr-color-on-surface) | .wr-breadcrumbs |
--wr-breadcrumbs-current-font-weight | var(--wr-font-weight-semibold) | .wr-breadcrumbs |
--wr-breadcrumbs-current-gap | var(--wr-space-sm) | .wr-breadcrumbs |
--wr-breadcrumbs-font-family | var(--wr-font-family-base) | .wr-breadcrumbs |
--wr-breadcrumbs-font-size | var(--wr-text-sm) | .wr-breadcrumbs |
--wr-breadcrumbs-gap | var(--wr-space-sm) | .wr-breadcrumbs |
--wr-breadcrumbs-link-color | var(--wr-color-primary-ink) | .wr-breadcrumbs |
--wr-breadcrumbs-link-gap | var(--wr-space-sm) | .wr-breadcrumbs |
--wr-breadcrumbs-link-radius | var(--wr-border-radius-sm) | .wr-breadcrumbs |
--wr-breadcrumbs-separator | '/' | .wr-breadcrumbs |
--wr-breadcrumbs-separator-color | color-mix(in srgb, var(--wr-color-on-surface) 30%, transparent) | .wr-breadcrumbs |
Dependencies
| @angular/router | @angular/router(optional peer) |
|---|---|
| Built on | Icon |