React Breadcrumb provides contextual information about page hierarchy.
<h3 id="setup">Setup</h3>
Refer to PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import { BreadCrumb } from 'primereact/breadcrumb';
</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/primereact/showcase/#/menumodel">MenuModel</a> for details.
<h3 id="getting-started">Getting Started</h3>
BreadCrumb requires a collection of menuitems as its model.
<pre><code class="lang-js">const 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' }
];

const home = { icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact' }
</code></pre>
<pre><code class="lang-html">&lt;BreadCrumb model={items} home={home}/&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/primereact/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/breadcrumb">Breadcrumb</a> showcase for demos and documentation.

React Breadcrumb provides contextual information about page hierarchy.

### Setup

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

### Import

```js
import { BreadCrumb } from 'primereact/breadcrumb';
```

### MenuModel API

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

### Getting Started

BreadCrumb requires a collection of menuitems as its model.

```js
const 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' }
];

const home = { icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact' }
```

```html
<BreadCrumb model={items} home={home}/>
```

### Theming

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

### Resources

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