Breadcrumb

Breadcrumb provides contextual information about page hierarchy.


import { BreadcrumbModule } from 'primeng/breadcrumb';

Breadcrumb provides contextual information about page hierarchy.


<p-breadcrumb [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 [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>

Menu items support navigation via routerLink, programmatic routing using commands, or external URLs.


<p-breadcrumb [home]="home" [model]="items" />

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.