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
Loading...
Loading...
String
TemplateRef
Loading...
Loading...
Loading...
Loading...
Loading...
API#
nz-breadcrumb#
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 |
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);