Breadcrumb provides contextual information about page hierarchy.
import { Breadcrumb } from 'primeng/breadcrumb';
Breadcrumb provides contextual information about page hierarchy.
<p-breadcrumb class="max-w-full" [model]="items" [home]="home" />
Custom content can be placed inside the items using the item template. The divider between the items has its own separator template.
<p-breadcrumb class="max-w-full" [model]="items" [home]="home">
<ng-template #item let-item>
<a class="cursor-pointer" [routerLink]="item.url">
<i [class]="item.icon"></i>
</a>
</ng-template>
<ng-template #separator> / </ng-template>
</p-breadcrumb>
Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.
<p-breadcrumb class="max-w-full" [model]="items">
<ng-template #item let-item>
<ng-container *ngIf="item.route; else elseBlock">
<a [routerLink]="item.route" class="p-breadcrumb-item-link">
<span [ngClass]="[item.icon ? item.icon : '', 'text-color']"></span>
<span class="text-primary font-semibold">{{ item.label }}</span>
</a>
</ng-container>
<ng-template #elseBlock>
<a [href]="item.url">
<span class="text-color">{{ item.label }}</span>
</a>
</ng-template>
</ng-template>
</p-breadcrumb>
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.