Breadcrumbs Blocks
Breadcrumbs are used to show the current page's location within a hierarchy.
Breadcrumbs
breadcrumbs/breadcrumbs.component.html
breadcrumbs/breadcrumbs.component.ts
breadcrumbs/index.ts
<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
Preview
Code
Breadcrumbs with Links
Preview
Code
Breadcrumbs with Custom Separator
Preview
Code