BreadCrumb
Breadcrumb provides contextual information about page hierarchy.
Import#
import { BreadCrumb } from 'primereact/breadcrumb';
Basic#
BreadCrumb requires a collection of menuitems as its model.
<BreadCrumb model={items} home={home} />
Template#
Custom content can be placed inside the menuitem using the template property.
<BreadCrumb model={items} home={home} />
Router#
Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.
<BreadCrumb model={items} home={home} />
Accessibility#
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.
