BreadcrumbBreadcrumb provides contextual information about page hierarchy.

Breadcrumb - 图1

Documentation

Import

  2. import {BreadcrumbModule} from 'primeng/breadcrumb';
  3. import {MenuItem} from 'primeng/api';
  4.  

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.

  2. export class BreadcrumbDemo implements OnInit {
  4.     private items: MenuItem[];
  6.     ngOnInit() {
  7.         this.items = [
  8.             {label:'Categories'},
  9.             {label:'Sports'},
  10.             {label:'Football'},
  11.             {label:'Countries'},
  12.             {label:'Spain'},
  13.             {label:'F.C. Barcelona'},
  14.             {label:'Squad'},
  15.             {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
  16.         ];
  17.     }
  18. }
  19.  
  2. <p-breadcrumb [model]="items"></p-breadcrumb>
  3.  

Properties

NameTypeDefaultDescription
modelarraynullAn array of menuitems.
homeMenuItemnullMenuItem configuration for the home icon.
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
ui-breadcrumbContainer element.
ui-menuitemMenuitem element.
ui-menuitem-textLabel of a menuitem.
ui-breadcrumb-chevronChevron element.

Dependencies

None.

Source

View on GitHub

  2. export class BreadcrumbDemo implements OnInit {
  4.     items: MenuItem[];
  6.     home: MenuItem;
  8.     ngOnInit() {
  9.         this.items = [
  10.             {label:'Categories'},
  11.             {label:'Sports'},
  12.             {label:'Football'},
  13.             {label:'Countries'},
  14.             {label:'Spain'},
  15.             {label:'F.C. Barcelona'},
  16.             {label:'Squad'},
  17.             {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi', icon: 'pi pi-external-link'}
  18.         ];
  20.         this.home = {icon: 'pi pi-home'};
  21.     }
  22. }
  23.  
  2. <p-breadcrumb [model]="items" [home]="home"></p-breadcrumb>
  3.