Breadcrumbs

Breadcrumbs are used to navigate and to indicate the currently viewed 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 { }

In Dynatrace we use hierarchy-based breadcrumbs. Each item in the navigation bar represents a page. The navigation bar is always on the top of the page, underneath the menubar and is themeable.

States

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

Animation

The breadcrumbs bar is not animated.

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.

Breadcrumbs

´ 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 element has no configuration options. It's just a wrapper for the dt-breadcrumbs-item elements.

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