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" />
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>
</a>
</ng-template>
<ng-template pTemplate="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 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>
</a>
</ng-container>
<ng-template #elseBlock>
<a [href]="item.url">
<span class="text-color">{{ item.label }}</span>
</a>
</ng-template>
</ng-template>
</p-breadcrumb>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-breadcrumb | Container element. |
| p-menuitem | Menuitem element. |
| p-menuitem-text | Label of a menuitem. |
| p-breadcrumb-chevron | Chevron element. |
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.
API defines helper props, events and others for the PrimeNG Breadcrumb module.
Breadcrumb provides contextual information about page hierarchy.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
| name | parameters | description | |
|---|---|---|---|
| onItemClick | event : BreadcrumbItemClickEvent |
Defines the templates used by the component.
Defines the custom events used by the component's emitters.
Custom select event.
Defines the custom interfaces used by the module.
MenuItem provides the following properties. Note that not all of them may be utilized by the tabmenu component.