Breadcrumb

Breadcrumb provides contextual information about page hierarchy.


import { BreadCrumb } from 'primereact/breadcrumb';
         

BreadCrumb requires a collection of menuitems as its model.


<BreadCrumb model={items} home={home} />
         

Custom content can be placed inside the menuitem using the template property.


<BreadCrumb model={items} home={home} />
         

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-breadcrumbContainer element.
p-menuitemMenuitem element.
p-menuitem-textLabel of a menuitem.
p-breadcrumb-chevronChevron element.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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.

Visit the API documentation for detailed information about all the properties, events and methods of the component.