Breadcrumbs Blocks

Breadcrumbs are used to show the current page's location within a hierarchy.

<nav [attr.aria-label]="ariaLabel()">
  <ol class="flex items-center list-none p-0 m-0 flex-wrap">
    @for (item of items(); track item; let last = $last; let first = $first) {
      <li>
        <ng-template [ngTemplateOutlet]="item.templateRef"></ng-template>
      </li>
      @if (!last) {
        <li aria-hidden="true">
          @if (separatorTemplateRef()) {
            <ng-template
              [ngTemplateOutlet]="
                separatorTemplateRef()!.templateRef
              "></ng-template>
          } @else {
            <mat-icon class="align-middle">chevron_right</mat-icon>
          }
        </li>
      }
    }
  </ol>
</nav>

Examples

Basic Breadcrumbs

Angular Material Blocks Logo

Angular Material Dev UI (or Angular Material Blocks) is one place stop for developers to explore components and blocks for their Angular Material and Tailwind CSS based applications.

Find us on X (Twitter), LinkedIn, Instagram & Threads