Breadcrumb provides contextual information about page hierarchy.

import { BreadcrumbModule } from 'primeng/breadcrumb';

Breadcrumb provides contextual information about page hierarchy.

<p-breadcrumb class="max-w-full" [model]="items" [home]="home"></p-breadcrumb>

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

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.