Source: https://primeng.org/breadcrumb

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

Breadcrumb

Breadcrumb provides contextual information about page hierarchy.

Import #

import { BreadcrumbModule } from 'primeng/breadcrumb';

Basic #

Breadcrumb provides contextual information about page hierarchy.

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

Template #

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>

Router #

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

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

Accessibility #

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.

• Import

• Basic

• Template

• Router

• Accessibility

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

PrimeNG 20.3.0 by PrimeTek