Breadcrumb Breadcrumb provides contextual information about page hierarchy.

Import


import {Breadcrumb,MenuItem} from 'primeng/primeng';

MenuModel API

Breadcrumb uses the common menumodel api to define its items, visit MenuModel API for details.

Getting Started

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>

Attributes

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.

Styling

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.

Dependencies

Native component that requires the css of PrimeUI Breadcrumb.


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>