File: breadcrumb.md | Updated: 11/15/2025
Introducing PrimeReact v11 Alpha 🥁Learn More
SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH
Breadcrumb provides contextual information about page hierarchy.
Import#
import { BreadCrumb } from 'primereact/breadcrumb';
Copy
Basic#
BreadCrumb requires a collection of menuitems as its model.
<BreadCrumb model={items} home={home} />
Copy
Template#
Custom content can be placed inside the menuitem using the template property.
<BreadCrumb model={items} home={home} />
Copy
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} />
Copy
Accessibility#
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.
Import
Basic
Template
Router
Accessibility
PrimeReact 10.9.7 by PrimeTek