Breadcrumb provides contextual information about page hierarchy.

import { BreadcrumbModule } from 'primeng/breadcrumb';

Breadcrumb provides contextual information about page hierarchy.

    [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 pTemplate="item" let-item>
        <a class="cursor-pointer" [routerLink]="item.url">
            <i [class]="item.icon"></i>
    <ng-template pTemplate="separator"> / </ng-template>

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 pTemplate="item" let-item>
        <ng-container *ngIf="item.route; else elseBlock">
            <a [routerLink]="item.route" class="p-menuitem-link">
                <span [ngClass]="[item.icon ? item.icon : '', 'text-color']"></span>
                <span class="text-primary font-semibold">{{ item.label }}</span>
        <ng-template #elseBlock>
            <a [href]="item.url">
                <span class="text-color">{{ item.label }}</span>

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.

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.