Breadcrumb for Angular

import { AuiBreadcrumb } from '@absoluteui/angular/breadcrumb';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Breadcrumb page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { breadcrumb: { ... } } }) (see Configuration).

Example

import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';
import type { BreadcrumbItem, BreadcrumbNavigateDetail } from '@absoluteui/components/breadcrumb';
import { AuiBreadcrumb } from '@absoluteui/angular/breadcrumb';

@Component({
  selector: 'app-trail',
  imports: [AuiBreadcrumb],
  template: `<aui-breadcrumb [items]="items" [maxItems]="3" (aui-navigate)="go($event)"></aui-breadcrumb>`,
})
export class TrailComponent {
  private readonly router = inject(Router);
  readonly items: BreadcrumbItem[] = [{ label: 'Home', href: '/' }, { label: 'Projects', href: '/projects' }, { label: 'Atlas' }];

  go(event: Event): void {
    const { item } = (event as CustomEvent<BreadcrumbNavigateDetail>).detail;
    if (item.href === undefined) return;
    event.preventDefault();
    void this.router.navigateByUrl(item.href);
  }
}

<aui-breadcrumb>

Class AuiBreadcrumb; template reference #ref="auiBreadcrumb".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
items	readonly BreadcrumbItem[]		Required. Trail from the root to the current page (last item). Items without href render as text.
label	string	'Breadcrumb (localized)'	Accessible name of the <nav>.
linkCurrent	boolean	false	Render the current (last) item as a link when it has an href.
icons	Partial<BreadcrumbIcons>		Icon slot overrides.
maxItems	number	'0'	0 never collapses. Otherwise (>= 2), longer trails show the first item, an expander, and the last maxItems - 1 items.
locale	string	'en-US'	Message locale.
direction	Direction	'ltr'	rtl mirrors the separator icon.

Outputs

Output	Payload	Description
(navigate)	BreadcrumbNavigateDetail	An unmodified primary click on a link. preventDefault stops native navigation so a router can handle it. Re-emits aui-navigate.

Read-only state

Property	Type	Description
expanded	Signal<boolean>	Whether the user expanded a collapsed trail.