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> <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 DefaultBreadcrumbsExampleComponent { } First view Second view Third view Current view export class DefaultBreadcrumbsExampleComponent { }

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> <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 DarkBreadcrumbsExampleComponent { }
First view Second view Current view
export class DarkBreadcrumbsExampleComponent { }

Placement

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

Behavior and corner cases

Breadcrumb on 360 abbreviated

Breadcrumb on 360

If there is not enough space to show all items names can be abbreviated. Multiple items can be collapsed to one - not clickable - item. Use the more icon to indicate this. The link to the first view and the indicator for the currently viewed page should always stay.

´ Loading interactive demo...
<dt-breadcrumbs> <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 DefaultBreadcrumbsExampleComponent { } First view Second view Third view Current view export class DefaultBreadcrumbsExampleComponent { }

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 {}

Options & Properties

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.

Name Type Default Description
@Input() color 'main' | 'error' | 'neutral' main Current variation of the theme color which is applied to the color of the breadcrumbs.

dt-breadcrumbs-item

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

Listening to an observable

´ Loading interactive demo...
<dt-breadcrumbs> <!-- 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 ObservableBreadcrumbsExampleComponent { 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}`, }, ]) ); } {{ item.label }} export class ObservableBreadcrumbsExampleComponent { private readonly interval = 5_000; data$: Observable> = 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> <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 ExternalBreadcrumbsExampleComponent { } google.com Current view export class ExternalBreadcrumbsExampleComponent { }

Dark

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <dt-breadcrumbs> <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 DarkBreadcrumbsExampleComponent { }
First view Second view Current view
export class DarkBreadcrumbsExampleComponent { }

Colors

´ Loading interactive demo...
<dt-breadcrumbs [color]="color"> <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 ColorBreadcrumbsExampleComponent { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } } First view Second view Current view main error neutral export class ColorBreadcrumbsExampleComponent { color = 'error'; changed(colorValue: string): void { this.color = colorValue; } }