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

String

TemplateRef

Configuring the Separator

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

      Loading...

API#

Property	Description	Type	Default
`[nzSeparator]`	Custom separator	`string \| TemplateRef<void> \| null`	`'/'`
`[nzAutoGenerate]`	Auto generate breadcrumb	`boolean`	`false`
`[nzRouteLabel]`	Name of property that determines displayed text in routing config. It should be used when `nzAutoGenerate` is `true`	`string`	`'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) => string`	`label => label`
`[nzRouteFn]`	Format breadcrumb item route, normally used in international app to bind current params or query strings to avoid losing them while navigate using breadcrumb. It should be used when `nzAutoGenerate` is `true`	`(route:string) => route`	`route => route`

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);

Use nzRouteFn to format or bind params and query strings to the route it self in international application:

<nz-breadcrumb [nzAutoGenerate]="true" [nzRouteLabel]="'breadcrumbI18nKey'" [nzRouteLabelFn]="translateFn" [nzRouteFn]="customRoute"></nz-breadcrumb>