Breadcrumb

Shows the current page’s location within the site’s hierarchy.

Bootstrap’s breadcrumb docs describe the markup and CSS.

Example

Pass the pages from the top level down to the current page as items. Items with an href are links, and the last item is the current page with aria-current="page".

HTML

<nav bsBreadcrumb label="Home breadcrumb" [items]="[{ label: 'Home' }]"></nav>
<nav
  bsBreadcrumb
  label="Library breadcrumb"
  [items]="[{ label: 'Home', href: '#' }, { label: 'Library' }]"></nav>
<nav
  bsBreadcrumb
  [items]="[
    { label: 'Home', href: '#' },
    { label: 'Library', href: '#' },
    { label: 'Data' },
  ]"></nav>

Text dividers

Bootstrap’s chevron icon is the default divider. Set divider to use text instead.

HTML

<nav
  bsBreadcrumb
  divider="/"
  label="Slash breadcrumb"
  [items]="[{ label: 'Home', href: '#' }, { label: 'Library' }]"></nav>
<nav
  bsBreadcrumb
  divider="›"
  label="Angle breadcrumb"
  [items]="[{ label: 'Home', href: '#' }, { label: 'Library' }]"></nav>

Router links

Use a bsBreadcrumbLink template to render each item yourself, for example with routerLink. The template gets the item and whether it is the current page. Set label to change the landmark’s accessible name.

<nav bsBreadcrumb label="Docs breadcrumb" [items]="items">
  <ng-template bsBreadcrumbLink let-item let-current="current">
    @if (current) {
      <span class="breadcrumb-link active">{{ item.label }}</span>
    } @else {
      <a class="breadcrumb-link" [routerLink]="item.href">{{ item.label }}</a>
    }
  </ng-template>
</nav>

API

BsBreadcrumb

Selector: nav[bsBreadcrumb] · Exported as: bsBreadcrumb

Inputs

Name	Type	Default	Description
`items`	`BsBreadcrumbItem[]`	`required`	Pages from the top level down to the current page: { label, href? }.
`divider`	`string`	`''`	Divider text. Empty uses Bootstrap’s chevron icon.
`label`	`string`	`'Breadcrumb'`	Accessible name of the navigation landmark.

BsBreadcrumbLink

Selector: ng-template[bsBreadcrumbLink]