Angular Breadcrumb provides contextual information about page hierarchy.
<h3 id="setup">Setup</h3>
Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import {BreadcrumbModule} from 'primeng/breadcrumb';
import {MenuItem} from 'primeng/api';
</code></pre>
<h3 id="menumodel-api">MenuModel API</h3>
Breadcrumb uses the common menumodel api to define its items, visit <a target="_blank" href="https://primefaces.org/primeng/showcase/#/menumodel">MenuModel API</a> for details.
<h3 id="getting-started">Getting Started</h3>
Breadcrumb requires a collection of menuitems connected to its model property.
<pre><code class="lang-js">export class BreadcrumbDemo implements OnInit {

 private items: MenuItem[];

 ngOnInit() {
 this.items = [
 {label:'Categories'},
 {label:'Sports'},
 {label:'Football'},
 {label:'Countries'},
 {label:'Spain'},
 {label:'F.C. Barcelona'},
 {label:'Squad'},
 {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
 ];
 }
}
</code></pre>
<pre><code class="lang-html">&lt;p-breadcrumb [model]="items"&gt;&lt;/p-breadcrumb&gt;
</code></pre>
<h3 id="theming">Theming</h3>
Breadcrumb supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primeng/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/breadcrumb">Breadcrumb</a> showcase for demos and documentation.

Angular Breadcrumb provides contextual information about page hierarchy.

### Setup

Refer to PrimeNG [setup documentation](https://primefaces.org/primeng/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import {BreadcrumbModule} from 'primeng/breadcrumb';
import {MenuItem} from 'primeng/api';
```

### MenuModel API

Breadcrumb uses the common menumodel api to define its items, visit [MenuModel API](https://primefaces.org/primeng/showcase/#/menumodel) for details.

### Getting Started

Breadcrumb requires a collection of menuitems connected to its model property.

```js
export class BreadcrumbDemo implements OnInit {

 private items: MenuItem[];
 
 ngOnInit() {
 this.items = [
 {label:'Categories'},
 {label:'Sports'},
 {label:'Football'},
 {label:'Countries'},
 {label:'Spain'},
 {label:'F.C. Barcelona'},
 {label:'Squad'},
 {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
 ];
 }
}
```

```html
<p-breadcrumb [model]="items"></p-breadcrumb>
```

### Theming

Breadcrumb supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primeng/showcase/#/theming) tool.

### Resources

Visit the PrimeNG [Breadcrumb](https://primefaces.org/primeng/showcase/#/breadcrumb) showcase for demos and documentation.