Breadcrumb provides contextual information about page hierarchy.
import Breadcrumb from 'primevue/breadcrumb';
Breadcrumb requires a collection of menuitems as its model.
<Breadcrumb :home="home" :model="items" />
Custom content can be placed inside the menuitem using the item templating.
<Breadcrumb :home="home" :model="items">
<template #item="item">
<a :class="item.class">
<span :class="item.icon"></span>
</a>
</template>
</Breadcrumb>
Following is the list of structural style classes, for theming classes visit theming page.
| 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. |
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.