Breadcrumb

A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.

When To Use#

  • When the system has more than two layers in a hierarchy.
  • When you need to inform the user of where they are.
  • When the user may need to navigate back to a higher level.
  • When the application has multi-layer architecture.

Import this Component Individually#

You can get more detail here.

import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';

Examples

Home / Application List / An Application /

The simplest use

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-breadcrumb-basic',
  template: `
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        Home
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>Application List</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        An Application
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  `
})
export class NzDemoBreadcrumbBasicComponent {}
Home / Breadcrumb /

Used together with RouterLink.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-breadcrumb-router',
  template: `
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        <a [routerLink]="['../../']">Home</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        Breadcrumb
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  `
})
export class NzDemoBreadcrumbRouterComponent {}

String

Home > Application List > An Application >

TemplateRef

Home Application List An Application

The separator can be customized by setting the separator property: nzSeparator

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-breadcrumb-separator',
  template: `
    <h4>String</h4>
    <nz-breadcrumb nzSeparator=">">
      <nz-breadcrumb-item>
        Home
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>Application List</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        An Application
      </nz-breadcrumb-item>
    </nz-breadcrumb>
    <br />
    <h4>TemplateRef</h4>
    <nz-breadcrumb [nzSeparator]="iconTemplate">
      <nz-breadcrumb-item>
        Home
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>Application List</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        An Application
      </nz-breadcrumb-item>
    </nz-breadcrumb>
    <ng-template #iconTemplate><i nz-icon nzType="arrow-right"></i></ng-template>
  `,
  styles: [
    `
      h4:first-child {
        margin-top: 0;
      }

      h4 {
        margin: 16px 0;
        font-size: 14px;
        line-height: 1;
        font-weight: normal;
      }
    `
  ]
})
export class NzDemoBreadcrumbSeparatorComponent {}
/ Application List / Application /

The icon should be placed in front of the text.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-breadcrumb-withIcon',
  template: `
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        <i nz-icon nzType="home"></i>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a><i nz-icon nzType="user"></i><span>Application List</span></a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        Application
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  `
})
export class NzDemoBreadcrumbWithIconComponent {}

Auto generate breadcrumbs using router.data.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-breadcrumb-auto',
  template: `
    <nz-breadcrumb [nzAutoGenerate]="true">
      Please refer to StackBlitz demo at https://stackblitz.com/edit/ng-zorro-breadcrumb-auto
    </nz-breadcrumb>
  `
})
export class NzDemoBreadcrumbAutoComponent {}
Ant Design / Component / An Application / Button /

Breadcrumbs support drop down menu.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-breadcrumb-dropdown',
  template: `
    <nz-breadcrumb>
      <nz-breadcrumb-item>
        Ant Design
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>Component</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item [nzOverlay]="menu">
        <a href>An Application</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        Button
      </nz-breadcrumb-item>
    </nz-breadcrumb>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <li nz-menu-item>General</li>
        <li nz-menu-item>Layout</li>
        <li nz-menu-item>Navigation</li>
      </ul>
    </nz-dropdown-menu>
  `
})
export class NzDemoBreadcrumbDropdownComponent {}

API#

nz-breadcrumb#

PropertyDescriptionTypeDefault
[nzSeparator]Custom separatorstring | TemplateRef<void>'/'
[nzAutoGenerate]Auto generate breadcrumbbooleanfalse

Using [nzAutoGenerate] by configuring data like this:

{
  path: '/path',
  component: SomeComponent,
  data: {
    breadcrumb: 'Display Name'
  }
}

For lazy loading moduels, you should write data in parent module like this:

{
  path: 'first',
  loadChildren: './first/first.module#FirstModule',
  data: {
    breadcrumb: 'First'
  },
}