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 { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';

Examples

Home/Application List/An Application/

The simplest use

expand codeexpand code
Loading...
Home/Breadcrumb/

Used together with RouterLink.

expand codeexpand code
Loading...

String

Home>Application List>An Application>

TemplateRef

HomeApplication ListAn Application

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

expand codeexpand code
Loading...
Location:Application Center/Application List/An Application

The separator can be customized by using the component nz-breadcrumb-separator.

expand codeexpand code
Loading...
/Application List/Application/

The icon should be placed in front of the text.

expand codeexpand code
Loading...

Auto generate breadcrumbs using router.data.

expand codeexpand code
Loading...
Ant Design/Component/An Application/Button/

Breadcrumbs support drop down menu.

expand codeexpand code
Loading...

API#

nz-breadcrumb#

PropertyDescriptionTypeDefault
[nzSeparator]Custom separatorstring | TemplateRef<void> | null'/'
[nzAutoGenerate]Auto generate breadcrumbbooleanfalse
[nzRouteLabel]Name of property that determines displayed text in routing config. It should be used when nzAutoGenerate is truestring'breadcrumb'
[nzRouteLabelFn]Format breadcrumb item label text,normally used in international app to translate i18n key. It should be used when nzAutoGenerate is true(label:string) => stringlabel => label

Using [nzAutoGenerate] by configuring data like this:

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

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

{
  path: 'first',
  loadChildren: () => import('./first/first.module').then(m => m.FirstModule),
  data: {
    breadcrumb: 'First'
  },
}

use nzRouteLabel to custom data breadcrumb label:

<nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'customBreadcrumb'"></nz-breadcrumb>
{
  path: 'path',
  component: SomeComponent,
  data: {
    customBreadcrumb: 'Display Name'
  }
}

use nzRouteLabelFn to format breadcrumb label in international application:

<nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'breadcrumbI18nKey'" [nzRouteLabelFn]="translateFn"></nz-breadcrumb>
// In Route
{
  path: 'path',
  component: SomeComponent,
  data: {
    breadcrumbI18nKey: 'i18n.aaa.bbbb'
  }
}

// In component
translateFn = (key:string) => this.yourI18nService.translate(key);