Navigation

Breadcrumb

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

Displays the path to the current resource using a hierarchy of links.

Usage#

app.component.ts

import { WDS_BREADCRUMB } from '@wds/angular/breadcrumb';

Examples#

Default#

Home

Components

Breadcrumb

Show code

breadcrumb-default.ts

import { Component } from '@angular/core';
import { WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent } from '@wds/angular/breadcrumb';

@Component({
  selector: 'app-breadcrumb-default-demo',
  imports: [WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent],
  template: `
    <wds-breadcrumb label="Default breadcrumb">
      <wds-breadcrumb-item>
        <wds-breadcrumb-link href="#">Home</wds-breadcrumb-link>
      </wds-breadcrumb-item>
      <wds-breadcrumb-item>
        <wds-breadcrumb-link href="#">Components</wds-breadcrumb-link>
      </wds-breadcrumb-item>
      <wds-breadcrumb-item>
        <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
      </wds-breadcrumb-item>
    </wds-breadcrumb>
  `,
})
export class BreadcrumbDefaultDemo {}

Separator#

separator changes the text of the automatic separators. For an icon, place wds-breadcrumb-separator between the items: the automatic separators turn off.

Home

Components

Breadcrumb

Home

Components

Breadcrumb

Show code

breadcrumb-separator.ts

import { Component } from '@angular/core';
import { WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent, WdsBreadcrumbSeparatorComponent } from '@wds/angular/breadcrumb';

@Component({
  selector: 'app-breadcrumb-separator-demo',
  imports: [WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent, WdsBreadcrumbSeparatorComponent],
  template: `
    <div class="flex flex-col gap-4">
      <wds-breadcrumb label="Breadcrumb with text separator" separator="/">
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Home</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Components</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
        </wds-breadcrumb-item>
      </wds-breadcrumb>

      <wds-breadcrumb label="Breadcrumb with custom separator">
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Home</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-separator>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12.1" cy="12.1" r="1" /></svg>
        </wds-breadcrumb-separator>
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Components</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-separator>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12.1" cy="12.1" r="1" /></svg>
        </wds-breadcrumb-separator>
        <wds-breadcrumb-item>
          <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
        </wds-breadcrumb-item>
      </wds-breadcrumb>
    </div>
  `,
})
export class BreadcrumbSeparatorDemo {}

Without href the link renders a native <button>, so it can be a wds-dropdown trigger.

Home

Components

Documentation

Themes

Blocks

Breadcrumb

Show code

breadcrumb-dropdown.ts

import { Component } from '@angular/core';
import { WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent } from '@wds/angular/breadcrumb';
import { WdsDropdownComponent, WdsDropdownItemComponent } from '@wds/angular/dropdown';

@Component({
  selector: 'app-breadcrumb-dropdown-demo',
  imports: [WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent, WdsDropdownComponent, WdsDropdownItemComponent],
  template: `
    <wds-breadcrumb label="Breadcrumb with dropdown">
      <wds-breadcrumb-item>
        <wds-breadcrumb-link href="#">Home</wds-breadcrumb-link>
      </wds-breadcrumb-item>
      <wds-breadcrumb-item>
        <wds-dropdown>
          <wds-breadcrumb-link slot="trigger">
            Components
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
          </wds-breadcrumb-link>
          <wds-dropdown-item value="documentation">Documentation</wds-dropdown-item>
          <wds-dropdown-item value="themes">Themes</wds-dropdown-item>
          <wds-dropdown-item value="blocks">Blocks</wds-dropdown-item>
        </wds-dropdown>
      </wds-breadcrumb-item>
      <wds-breadcrumb-item>
        <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
      </wds-breadcrumb-item>
    </wds-breadcrumb>
  `,
})
export class BreadcrumbDropdownDemo {}

Ellipsis#

Collapses the middle of a long trail. Screen readers get the label of the ellipsis.

Home

Components

Breadcrumb

Show code

breadcrumb-ellipsis.ts

import { Component } from '@angular/core';
import { WdsBreadcrumbComponent, WdsBreadcrumbEllipsisComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent } from '@wds/angular/breadcrumb';

@Component({
  selector: 'app-breadcrumb-ellipsis-demo',
  imports: [WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbEllipsisComponent, WdsBreadcrumbPageComponent],
  template: `
    <wds-breadcrumb label="Collapsed breadcrumb">
      <wds-breadcrumb-item>
        <wds-breadcrumb-link href="#">Home</wds-breadcrumb-link>
      </wds-breadcrumb-item>
      <wds-breadcrumb-item>
        <wds-breadcrumb-ellipsis></wds-breadcrumb-ellipsis>
      </wds-breadcrumb-item>
      <wds-breadcrumb-item>
        <wds-breadcrumb-link href="#">Components</wds-breadcrumb-link>
      </wds-breadcrumb-item>
      <wds-breadcrumb-item>
        <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
      </wds-breadcrumb-item>
    </wds-breadcrumb>
  `,
})
export class BreadcrumbEllipsisDemo {}

With icon#

An icon-only link needs a label: it becomes its accessible name.

Components

Breadcrumb

Show code

breadcrumb-with-icon.ts

import { Component } from '@angular/core';
import { WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent } from '@wds/angular/breadcrumb';

@Component({
  selector: 'app-breadcrumb-with-icon-demo',
  imports: [WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent],
  template: `
    <wds-breadcrumb label="Breadcrumb with icon">
      <wds-breadcrumb-item>
        <wds-breadcrumb-link href="#" label="Home">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" /><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></svg>
        </wds-breadcrumb-link>
      </wds-breadcrumb-item>
      <wds-breadcrumb-item>
        <wds-breadcrumb-link href="#">Components</wds-breadcrumb-link>
      </wds-breadcrumb-item>
      <wds-breadcrumb-item>
        <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
      </wds-breadcrumb-item>
    </wds-breadcrumb>
  `,
})
export class BreadcrumbWithIconDemo {}

Size#

Home

Components

Breadcrumb

Home

Components

Breadcrumb

Home

Components

Breadcrumb

Show code

breadcrumb-size.ts

import { Component } from '@angular/core';
import { WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent } from '@wds/angular/breadcrumb';

@Component({
  selector: 'app-breadcrumb-size-demo',
  imports: [WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent],
  template: `
    <div class="flex flex-col gap-4">
      <wds-breadcrumb size="sm" label="Breadcrumb sm">
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Home</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Components</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
        </wds-breadcrumb-item>
      </wds-breadcrumb>
      <wds-breadcrumb size="md" label="Breadcrumb md">
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Home</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Components</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
        </wds-breadcrumb-item>
      </wds-breadcrumb>
      <wds-breadcrumb size="lg" label="Breadcrumb lg">
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Home</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Components</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
        </wds-breadcrumb-item>
      </wds-breadcrumb>
    </div>
  `,
})
export class BreadcrumbSizeDemo {}

Align#

Home

Components

Breadcrumb

Home

Components

Breadcrumb

Home

Components

Breadcrumb

Show code

breadcrumb-align.ts

import { Component } from '@angular/core';
import { WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent } from '@wds/angular/breadcrumb';

@Component({
  selector: 'app-breadcrumb-align-demo',
  imports: [WdsBreadcrumbComponent, WdsBreadcrumbItemComponent, WdsBreadcrumbLinkComponent, WdsBreadcrumbPageComponent],
  template: `
    <div class="flex flex-col gap-4">
      <wds-breadcrumb align="start" label="Breadcrumb aligned start">
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Home</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Components</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
        </wds-breadcrumb-item>
      </wds-breadcrumb>
      <wds-breadcrumb align="center" label="Breadcrumb aligned center">
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Home</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Components</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
        </wds-breadcrumb-item>
      </wds-breadcrumb>
      <wds-breadcrumb align="end" label="Breadcrumb aligned end">
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Home</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-link href="#">Components</wds-breadcrumb-link>
        </wds-breadcrumb-item>
        <wds-breadcrumb-item>
          <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
        </wds-breadcrumb-item>
      </wds-breadcrumb>
    </div>
  `,
})
export class BreadcrumbAlignDemo {}

Link#

In Angular routerLink works on wds-breadcrumb-link as on <a>: it sets href and leaves Ctrl/⌘+click to the browser.

Home

Components

Breadcrumb

Show code

breadcrumb-link.ts

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { WDS_BREADCRUMB } from '@wds/angular/breadcrumb';

@Component({
  selector: 'app-breadcrumb-link-demo',
  imports: [RouterLink, WDS_BREADCRUMB],
  template: `
    <wds-breadcrumb label="Router breadcrumb">
      <wds-breadcrumb-item>
        <wds-breadcrumb-link routerLink="/docs/welcome">Home</wds-breadcrumb-link>
      </wds-breadcrumb-item>
      <wds-breadcrumb-item>
        <wds-breadcrumb-link routerLink="/docs/components">Components</wds-breadcrumb-link>
      </wds-breadcrumb-item>
      <wds-breadcrumb-item>
        <wds-breadcrumb-page>Breadcrumb</wds-breadcrumb-page>
      </wds-breadcrumb-item>
    </wds-breadcrumb>
  `,
})
export class BreadcrumbLinkDemo {}

API References#

Breadcrumb: the path to the current page as a list of links (<nav> with an <ol>). Items get a separator (chevron or separator text) automatically. A wds-breadcrumb-separator placed between the items turns the automatic separators off.

Attributes

Attribute	Type	Default	Description
label	string	'Breadcrumb'	Accessible name of the navigation (`aria-label` of the `<nav>`).
size	WdsBreadcrumbSize	'md'	Text size.
align	WdsBreadcrumbAlign	'start'	Horizontal alignment of the items.
wrap	WdsBreadcrumbWrap	'wrap'	`nowrap` keeps the items on one line.
separator	string	''	Text of the automatic separator (e.g. `/`). Empty: a chevron icon.

Slots

Slot	Description
(default)	`wds-breadcrumb-item` and optionally `wds-breadcrumb-separator` elements.

CSS parts (::part)

Part	Description
nav	The native `<nav>`.
list	The native `<ol>`.

CSS custom properties

Property	Description
--wds-breadcrumb-gap	Space between items and separators (6px, 10px from 640px).

Breadcrumb item (role="listitem"). Followed by a separator unless it is the last item or the trail has its own wds-breadcrumb-separator elements.

Slots

Slot	Description
(default)	`wds-breadcrumb-link`, `wds-breadcrumb-page`, `wds-breadcrumb-ellipsis` or a `wds-dropdown`.

CSS parts (::part)

Part	Description
separator	The automatic separator.

Link to an ancestor page. With href it renders a native <a>, without it a native <button> (e.g. a wds-dropdown trigger). In Angular routerLink works as on <a>: it sets href. aria-expanded, aria-haspopup and aria-label on the host are forwarded to the native element.

Attributes

Attribute	Type	Description
href	string \| undefined	URL of the page. Without it the link renders as a `<button>`.
target	string \| undefined
label	string \| undefined	Accessible label (`aria-label`), required for icon-only content.

Slots

Slot	Description
(default)	Link content (text, `<svg>` icon).

CSS parts (::part)

Part	Description
link	The native `<a>` or `<button>`.

The current page: the last, non-interactive item of the trail (aria-current="page").

Slots

Slot	Description
(default)	Page name.

Separator placed by hand between wds-breadcrumb-item elements. Its presence turns off the automatic separators of the trail. Hidden from screen readers.

Slots

Slot	Description
(default)	Separator content (text or `<svg>`). Default: a chevron.

Ellipsis in place of collapsed items. The icon is hidden, screen readers get label. Put it in a wds-breadcrumb-link to use it as a wds-dropdown trigger.

Attributes

Attribute	Type	Default	Description
color	WdsBreadcrumbEllipsisColor	'muted'	`muted` inherits the trail color, `strong` uses the foreground color.
label	string	'More breadcrumbs'	Text for screen readers.

Accessibility#

wds-breadcrumb renders a <nav> landmark named by label (default Breadcrumb). When a page has more than one breadcrumb, give each a different label.

The items form an ordered list: an <ol> with listitem elements. Separators, automatic or wds-breadcrumb-separator, are hidden from screen readers.

wds-breadcrumb-page marks the current page with aria-current="page". wds-breadcrumb-ellipsis hides its icon and is read as its label (default More breadcrumbs).

An icon-only wds-breadcrumb-link needs a label: it becomes the accessible name of the link. A link without href is a native <button>; as a wds-dropdown trigger it gets aria-haspopup and aria-expanded.

Keyboard support#

Key	Function
Tab	Moves focus to the next link. Links follow the page tab sequence.
Shift + Tab	Moves focus to the previous link.
Enter	Follows the focused link, or opens the menu of a link without `href`.
Space	Opens the menu of a link without `href`.

Usage#

Examples#

Default#

Separator#

Dropdown#

Ellipsis#

With icon#

Size#

Align#

Link#

API References#

wds-breadcrumb#

Attributes

Slots

CSS parts (::part)

CSS custom properties

wds-breadcrumb-item#

Slots

CSS parts (::part)

wds-breadcrumb-link#

Attributes

Slots

CSS parts (::part)

wds-breadcrumb-page#

Slots

wds-breadcrumb-separator#

Slots

wds-breadcrumb-ellipsis#

Attributes

Accessibility#

Screen reader#

Keyboard support#