Vue3 Breadcrumb provides contextual information about page hierarchy.
It supports Vue 3 with <a target="_blank" href="https://primefaces.org/primevue/showcase">PrimeVue 3</a> and Vue 2 with <a target="_blank" href="https://primefaces.org/primevue/showcase-v2">PrimeVue 2</a>.
<h3 id="setup">Setup</h3>
Refer to PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/setup">setup documentation</a> for download and installation steps for your environment such as Vue CLI, Vite or browser.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import Breadcrumb from 'primevue/breadcrumb';
</code></pre>
<h3 id="menumodel">MenuModel</h3>
Breadcrumb uses the common MenuModel API to define the items, visit <a target="_blank" href="https://primefaces.org/primevue/showcase/#/menumodel">MenuModel API</a> for details.
<h3 id="getting-started">Getting Started</h3>
Breadcrumb requires a collection of menuitems as its model and a home item.
<pre><code class="lang-html">&lt;Breadcrumb :home="home" :model="items" /&gt;
</code></pre>
<pre><code class="lang-js">export default {
 data() {
 return {
 home: {icon: 'pi pi-home', to: '/'},
 items: [
 {label: 'Computer'},
 {label: 'Notebook'},
 {label: 'Accessories'},
 {label: 'Backpacks'},
 {label: 'Item'}
 ]
 }
 }
}
</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/primevue/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/breadcrumb">Breadcrumb</a> showcase for demos and documentation.

Vue3 Breadcrumb provides contextual information about page hierarchy.
It supports Vue 3 with [PrimeVue 3](https://primefaces.org/primevue/showcase) and Vue 2 with [PrimeVue 2](https://primefaces.org/primevue/showcase-v2).

### Setup

Refer to PrimeVue [setup documentation](https://primefaces.org/primevue/showcase/#/setup) for download and installation steps for your environment such as Vue CLI, Vite or browser.


### Import

```js
import Breadcrumb from 'primevue/breadcrumb';
```

### MenuModel

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

### Getting Started

Breadcrumb requires a collection of menuitems as its model and a home item.

```html
<Breadcrumb :home="home" :model="items" />
```

```js
export default {
 data() {
 return {
 home: {icon: 'pi pi-home', to: '/'},
 items: [
 {label: 'Computer'},
 {label: 'Notebook'},
 {label: 'Accessories'},
 {label: 'Backpacks'},
 {label: 'Item'}
 ]
 }
 }
}
```

### Theming

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

### Resources

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