Breadcrumb

Open in the demo →

hx-breadcrumb renders the path to the current page as a nav landmark with an ordered list. The last item is the current page (aria-current="page"); items with routerLink or url are links. It needs @angular/router.

<hx-breadcrumb [model]="items" [home]="{ icon: 'pi pi-home', routerLink: '/' }" />

An item is { label?, icon?, routerLink?, url?, target?, disabled?, visible? }; icon is the CSS classes of an icon font. An item without a label (the home icon) gets aria-label="Home". ariaLabel renames the landmark.

Tokens

The look comes from the design tokens --h-breadcrumb-* (see Theming); override them in your theme, never the component CSS.

Part of @gravionlabs/helix-ui; all components are listed in the component reference.