Breadcrumb

New

Show where a page belongs and give people a clear path back through your application.

Router linksCustom templatesAccessible navigation

Basic

Provide a model and an optional home item. The last visible item represents the current page.

Template

Customize item content and separators. The component keeps its accessible links and buttons around your content.

<av-breadcrumb [model]="items">
  <ng-template #item let-item let-last="last">
    <span>{{ item.label }}</span>
    @if (last) { <small>Current</small> }
  </ng-template>
  <ng-template #separator>/</ng-template>
</av-breadcrumb>

Router

Use routerLink for application routes or url for external pages. Angular opens in a new tab.

Commands and disabled items

Commands use native buttons with Enter and Space support. Disabled items are skipped in the tab order.

Select a folder to run its command.

Usage

import { AvBreadcrumb, AvBreadcrumbItem } from 'avero-ui';

home: AvBreadcrumbItem = { label: 'Home', routerLink: '/' };
items: AvBreadcrumbItem[] = [
  { label: 'Projects', routerLink: '/projects' },
  { label: 'Website' }
];

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

API

model accepts AvBreadcrumbItem[]. home adds an optional first item. Set ariaLabel or ariaLabelledBy to name the navigation landmark.

Items support label, icon (CSS class), ariaLabel, routerLink, queryParams, fragment, url, target, command, disabled and visible. onItemClick emits the item and original mouse event.

The #item template receives the item, index and last flag. Use non-interactive content inside it; links and buttons are provided by the component. #separator is decorative and hidden from assistive technology.