Breadcrumbs

Breadcrumbs are used to navigate and to indicate the currently viewed page. In Dynatrace we use hierarchy-based breadcrumbs. Each item of the breadcrumbs bar represents a page.

´ Loading interactive demo...
<dt-breadcrumbs aria-label="Breadcrumbs navigation"> <dt-breadcrumbs-item href="first">First view</dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }]"> Second view </dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }, 'third']" > Third view </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </dt-breadcrumbs> export class BreadcrumbsDefaultExample {} <dt-breadcrumbs aria-label="Breadcrumbs navigation"> <dt-breadcrumbs-item href="first">First view</dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }]"> Second view </dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }, 'third']" > Third view </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </dt-breadcrumbs> export class BreadcrumbsDefaultExample {}

States

The breadcrumbs have a default, a hover and an active state but can't be disabled.

Variants

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <dt-breadcrumbs aria-label="Breadcrumbs navigation"> <dt-breadcrumbs-item href="first">First view</dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }]"> Second view </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </dt-breadcrumbs> </div> export class BreadcrumbsDarkExample {} <div class="dark" dtTheme=":dark"> <dt-breadcrumbs aria-label="Breadcrumbs navigation"> <dt-breadcrumbs-item href="first">First view</dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }]"> Second view </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </dt-breadcrumbs> </div> export class BreadcrumbsDarkExample {}

Placement

The breadcrumbs bar is always on top of the page, underneath the menubar.

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 three ellipses as soon as the maximum length is exceeded.

Breadcrumb maximum item length

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 closed Breadcrumb items grouped together expanded

Breadcrumbs are used to navigate and to indicate the currently viewed page.

Imports

You have to import the DtBreadcrumbsModule when you want to use dt-breadcrumbs or dt-breadcrumbs-item elements:

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

dt-breadcrumbs

dt-breadcrumbs component accepts a color property to define the color version of the breadcrumbs. It's a wrapper for the dt-breadcrumbs-item elements.

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 - Takes precedence as the element's text alternative.

dt-breadcrumbs-item

Inputs

Name Type Default Description
<ng-content> html HTML to be rendered as item content
href string any[] Value passed to the routerLink attribute underneath, accepts the same values as the directive. Element will be item as active automatically if the href attribute matches the current route.
external boolean | undefined false If empty or truthy parameter given, the href attribute will not be interpreted as internal router link but rather as en external href

Examples

Default

´ Loading interactive demo...
<dt-breadcrumbs aria-label="Breadcrumbs navigation"> <dt-breadcrumbs-item href="first">First view</dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }]"> Second view </dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }, 'third']" > Third view </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </dt-breadcrumbs> export class BreadcrumbsDefaultExample {} <dt-breadcrumbs aria-label="Breadcrumbs navigation"> <dt-breadcrumbs-item href="first">First view</dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }]"> Second view </dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }, 'third']" > Third view </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </dt-breadcrumbs> export class BreadcrumbsDefaultExample {}

Listening to an observable

´ Loading interactive demo...
<dt-breadcrumbs aria-label="Breadcrumbs navigation"> <!-- data$ emits a new items list after each 5 seconds --> <dt-breadcrumbs-item *ngFor="let item of data$ | async" [href]="item.href" > {{ item.label }} </dt-breadcrumbs-item> </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 --> <dt-breadcrumbs-item *ngFor="let item of data$ | async" [href]="item.href" > {{ item.label }} </dt-breadcrumbs-item> </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}`, }, ]), ); }

External

´ Loading interactive demo...
<dt-breadcrumbs aria-label="Breadcrumbs navigation"> <dt-breadcrumbs-item href="http://google.com" external> google.com </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </dt-breadcrumbs> export class BreadcrumbsExternalExample {} <dt-breadcrumbs aria-label="Breadcrumbs navigation"> <dt-breadcrumbs-item href="http://google.com" external> google.com </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </dt-breadcrumbs> export class BreadcrumbsExternalExample {}

Dark

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <dt-breadcrumbs aria-label="Breadcrumbs navigation"> <dt-breadcrumbs-item href="first">First view</dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }]"> Second view </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </dt-breadcrumbs> </div> export class BreadcrumbsDarkExample {} <div class="dark" dtTheme=":dark"> <dt-breadcrumbs aria-label="Breadcrumbs navigation"> <dt-breadcrumbs-item href="first">First view</dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }]"> Second view </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </dt-breadcrumbs> </div> export class BreadcrumbsDarkExample {}

Colors

´ Loading interactive demo...
<dt-breadcrumbs [color]="color" aria-label="Breadcrumbs navigation"> <dt-breadcrumbs-item href="first">First view</dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }]"> Second view </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </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"> <dt-breadcrumbs-item href="first">First view</dt-breadcrumbs-item> <dt-breadcrumbs-item [href]="['first', 'second', { param: 123 }]"> Second view </dt-breadcrumbs-item> <dt-breadcrumbs-item>Current view</dt-breadcrumbs-item> </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; } }