import {BreadcrumbModule,MenuItem} from 'primeng/primeng';
Breadcrumb uses the common menumodel api to define its items, visit MenuModel API for details.
Breadcrumb requires a collection of menuitems connected to its model property.
export class BreadcrumbDemo implements OnInit {
private items: MenuItem[];
ngOnInit() {
this.items = [];
this.items.push({label:'Categories'});
this.items.push({label:'Sports'});
this.items.push({label:'Football'});
this.items.push({label:'Countries'});
this.items.push({label:'Spain'});
this.items.push({label:'F.C. Barcelona'});
this.items.push({label:'Squad'});
this.items.push({label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'});
}
}
<p-breadcrumb [model]="items"></p-breadcrumb>
Name | Type | Default | Description |
---|---|---|---|
model | array | null | An array of menuitems. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-breadcrumb | Container element. |
ui-menuitem | Menuitem element. |
ui-menuitem-text | Label of a menuitem. |
ui-breadcrumb-chevron | Chevron element. |
None.
export class BreadcrumbDemo implements OnInit {
private items: MenuItem[];
ngOnInit() {
this.items = [];
this.items.push({label:'Categories'});
this.items.push({label:'Sports'});
this.items.push({label:'Football'});
this.items.push({label:'Countries'});
this.items.push({label:'Spain'});
this.items.push({label:'F.C. Barcelona'});
this.items.push({label:'Squad'});
this.items.push({label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'});
}
}
<p-breadcrumb [model]="items"></p-breadcrumb>