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>
router-link with route configuration can also be used within templating for further customization.
<Breadcrumb :home="home" :model="items">
<template #item="{item}">
<router-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>
</router-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 'router-link-active-exact' class if route exactly matches the item path. |
| aria-label | string | null | Defines a string value that labels an interactive element. |
| aria-labelledby | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
| 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-breadcrumb-list | Ordered list element. |
| p-breadcrumb-home | First list element. |
| p-menuitem | Menuitem element. |
| p-menuitem-link | Link element of the menuitem. |
| p-menuitem-text | Label of a menuitem. |
| p-menuitem-icon | Icon of a menuitem. |
None.
Breadcrumb uses the nav element and since any attribute is passed to the root implicitly aria-labelledby or aria-label can be used to describe the component. Inside an ordered list is used where the list item separators have aria-hidden to be able to ignored by the screen readers. If the last link represents the current route, aria-current is added with "page" as the value.
No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.
None.