Breadcrumbs

Breadcrumbs are a navigational aid that help the user understand on what page they are and what path led them there.

work in progress themable

Breadcrumbs are used to navigate and to indicate the currently viewed page. Our breadcrumbs are hierarchy-based, which means that every item of the breadcrumb represents a page and thus also the path that led up to the currenty visited page.

´ Loading interactive demo...
<dt-breadcrumbs aria-label="Breadcrumbs navigation"> <a dtBreadcrumbsItem href="first">First view</a> <a dtBreadcrumbsItem href="first/second"> Second view </a> <a dtBreadcrumbsItem href="first/second/third"> Third view </a> <a dtBreadcrumbsItem>Current view</a> </dt-breadcrumbs> export class BreadcrumbsDefaultExample {} <dt-breadcrumbs aria-label="Breadcrumbs navigation"> <a dtBreadcrumbsItem href="first">First view</a> <a dtBreadcrumbsItem href="first/second"> Second view </a> <a dtBreadcrumbsItem href="first/second/third"> Third view </a> <a dtBreadcrumbsItem>Current view</a> </dt-breadcrumbs> export class BreadcrumbsDefaultExample {}

Imports

You have to import the DtBreadcrumbsModule when you want to use the dt-breadcrumbs.

@NgModule({
  imports: [DtBreadcrumbsModule],
})
class MyModule {}

Initialization

The dt-breadcrumbs component accepts a color property to define the color version of the breadcrumbs. Anchor elements with the dtBreadcrumbsItem directive applied can be used as breadcrumbs items.

Inputs

Name Type Default Description
color 'main' | 'error' | 'neutral' main Current variation of the theme color which is applied to the color of the breadcrumbs.
aria-label string undefined Takes precedence as the element's text alternative.

To make our components accessible it is obligatory to provide either an aria-label or aria-labelledby.

Behavior

Items within a breadcrumb have a maximum length. To ensure that unusually long items do not take up too much space, their text value will be abbreviated using an ellipsis as soon as the maximum length is exceeded.

Breadcrumb items grouped together closed

Should there not be enough space in the component to show all items, individual items are grouped together (starting from the left) and can be accessed by clicking the ... item in the breadcrumb.

Breadcrumb items grouped together expanded

Theming

Breadcrumbs always have the theme color of the current page the user is visiting. If the page does not have a theme color (e.g. in the settings), then the breadcrumbs will be displayed in gray.

´ Loading interactive demo...
<dt-breadcrumbs [color]="color" aria-label="Breadcrumbs navigation"> <a dtBreadcrumbsItem href="first">First view</a> <a dtBreadcrumbsItem href="first/second"> Second view </a> <a dtBreadcrumbsItem>Current view</a> </dt-breadcrumbs> <dt-button-group [value]="color" (valueChange)="changed($event)" style="margin-top: 16px" > <dt-button-group-item value="main">main</dt-button-group-item> <dt-button-group-item value="error">error</dt-button-group-item> <dt-button-group-item value="neutral">neutral</dt-button-group-item> </dt-button-group> export class BreadcrumbsColorExample { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } } <dt-breadcrumbs [color]="color" aria-label="Breadcrumbs navigation"> <a dtBreadcrumbsItem href="first">First view</a> <a dtBreadcrumbsItem href="first/second"> Second view </a> <a dtBreadcrumbsItem>Current view</a> </dt-breadcrumbs> <dt-button-group [value]="color" (valueChange)="changed($event)" style="margin-top: 16px" > <dt-button-group-item value="main">main</dt-button-group-item> <dt-button-group-item value="error">error</dt-button-group-item> <dt-button-group-item value="neutral">neutral</dt-button-group-item> </dt-button-group> export class BreadcrumbsColorExample { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } }

Listening to an observable

Content within the breadcrumb can change.

´ Loading interactive demo...
<dt-breadcrumbs aria-label="Breadcrumbs navigation"> <!-- data$ emits a new items list after each 5 seconds --> <a dtBreadcrumbsItem *ngFor="let item of data$ | async" [href]="item.href" > {{ item.label }} </a> </dt-breadcrumbs> export class BreadcrumbsObservableExample { private readonly interval = 5_000; data$: Observable<Array<{ label: string; href?: string }>> = timer( 0, this.interval, ).pipe( map((i: number) => [ { label: `First view ${i}`, href: 'first', }, { label: `Second view ${i + 1}`, href: 'first/second', }, { // tslint:disable-next-line no-magic-numbers label: `Current view ${i + 2}`, }, ]), ); } <dt-breadcrumbs aria-label="Breadcrumbs navigation"> <!-- data$ emits a new items list after each 5 seconds --> <a dtBreadcrumbsItem *ngFor="let item of data$ | async" [href]="item.href" > {{ item.label }} </a> </dt-breadcrumbs> export class BreadcrumbsObservableExample { private readonly interval = 5_000; data$: Observable<Array<{ label: string; href?: string }>> = timer( 0, this.interval, ).pipe( map((i: number) => [ { label: `First view ${i}`, href: 'first', }, { label: `Second view ${i + 1}`, href: 'first/second', }, { // tslint:disable-next-line no-magic-numbers label: `Current view ${i + 2}`, }, ]), ); }

Dark

Breadcrumbs also work on dark background.

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <dt-breadcrumbs aria-label="Breadcrumbs navigation"> <a dtBreadcrumbsItem href="first">First view</a> <a dtBreadcrumbsItem href="first/second"> Second view </a> <a dtBreadcrumbsItem>Current view</a> </dt-breadcrumbs> </div> export class BreadcrumbsDarkExample {} <div class="dark" dtTheme=":dark"> <dt-breadcrumbs aria-label="Breadcrumbs navigation"> <a dtBreadcrumbsItem href="first">First view</a> <a dtBreadcrumbsItem href="first/second"> Second view </a> <a dtBreadcrumbsItem>Current view</a> </dt-breadcrumbs> </div> export class BreadcrumbsDarkExample {}