Breadcrumb

Auto Mode

When used without items input, the component reads route data.title (or data.breadcrumb as override) and builds the breadcrumb chain automatically. The current page breadcrumb below is generated from the active route.

HTML

<!-- No inputs = auto mode from route data -->
<header>
  <rui-breadcrumb />
</header>

Manual Mode

Pass an explicit items input to render a custom breadcrumb trail. Icons on individual items are supported.

HTML

<rui-breadcrumb
  [items]="[
    { label: 'Home', url: '/', icon: 'home' },
    { label: 'Products', url: '/products', icon: 'category' },
    { label: 'Electronics', url: '/products/electronics' },
  ]"
/>

Custom Separator

The separator input accepts any Material icon name.

HTML

<rui-breadcrumb
  [items]="[
    { label: 'Dashboard', url: '/dashboard' },
    { label: 'Settings', url: '/settings' },
    { label: 'Profile', url: '/settings/profile' },
  ]"
  separator="arrow_forward"
/>

Single Crumb

A single breadcrumb renders without a separator and with aria-current="page".

HTML

<rui-breadcrumb
  [items]="[{ label: 'Home', url: '/' }]"
/>

Configuration

The root element and its icon are configurable via the RUI_BREADCRUMB_DEFAULT_OPTIONS injection token.

import { RUI_BREADCRUMB_DEFAULT_OPTIONS } from '@all-the.rest/mat-extended/breadcrumb';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    {
      provide: RUI_BREADCRUMB_DEFAULT_OPTIONS,
      useValue: {
        rootLabel: 'Dashboard',
        rootUrl: '/dashboard',
        rootIcon: 'dashboard',
      },
    },
  ],
});