import Breadcrumb from 'primevue/breadcrumb';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/breadcrumb/breadcrumb.min.js"></script>
Breadcrumb uses the common MenuModel API to define the items, visit
Breadcrumb requires a collection of menuitems as its model and a home item.
<Breadcrumb :home="home" :model="items" />
export default {
data() {
return {
home: {icon: 'pi pi-home', to: '/'},
items: [
{label: 'Computer'},
{label: 'Notebook'},
{label: 'Accessories'},
{label: 'Backpacks'},
{label: 'Item'}
]
}
}
}
Breadcrumb offers content customization with the item template that receives the menuitem instance from the model as a parameter.
<Breadcrumb :home="home" :model="items">
<template #item="{item}">
<a :href="item.url">{{item.label}}</a>
</template>
</Breadcrumb>
nuxt-link with route configuration can also be used within templating for further customization.
<Breadcrumb :home="home" :model="items">
<template #item="{item}">
<nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}">
<a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}>{{route.fullPath}}</a>
</nuxt-link>
</template>
</Breadcrumb>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| model | array | null | An array of menuitems. |
| home | menuitem | null | Configuration for the home icon. |
| exact | boolean | true | Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path. |
| Name | Parameters |
|---|---|
| item | item: Menuitem instance |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-breadcrumb | Container element. |
| p-menuitem | Menuitem element. |
| p-menuitem-text | Label of a menuitem. |
| p-breadcrumb-chevron | Chevron element. |
None.