Angular Breadcrumb - Customisation

This post is over a year old, some of this information may be out of date.

angular-crumbs is an open-source module that includes a BreadcrumbComponent that is driven from router config, and a BreadcrumbService for setting crumbs dynamically for a route.

For how-to guides see angular-crumbs installation and getting started

The breadcrumb component sets no styling limitations. It can be used by itself

<breadcrumb></breadcrumb>

Or it can be customised to work with a styling framework. Customising the breadcrumb template is done by transcluding your own layout, e.g. a bootstrap breadcrumb template may look like

<breadcrumb #parent>
    <ol class="breadcrumb">
        <ng-template ngFor let-route [ngForOf]="parent.breadcrumbs">
            <li *ngIf="!route.terminal" class="breadcrumb-item">
                <a href="" [routerLink]="[route.url]">{{ route.displayName }}</a>
            </li>
            <li *ngIf="route.terminal" class="breadcrumb-item active" aria-current="page">{{ route.displayName }}</li>
        </ng-template>
    </ol>
</breadcrumb>

Live Angular 6 examples are now up, demonstrating usages with: