Breadcrumb

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.

NameElement
p-breadcrumbContainer element.
p-breadcrumb-listOrdered list element.
p-breadcrumb-homeFirst list element.
p-menuitemMenuitem element.
p-menuitem-linkLink element of the menuitem.
p-menuitem-textLabel of a menuitem.
p-menuitem-iconIcon of a menuitem.

Screen Reader

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.

Keyboard Support

No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.