Skip to content
TypeScript JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github issue template Sep 19, 2017
demos demo favicons Sep 9, 2018
src version bump Sep 7, 2018
.gitignore project restructure - changed build to be based on [angular-npm-modul… Jun 28, 2017
LICENSE update author name 👰🏻 Aug 30, 2018 update readme and tidy up linked examples Sep 9, 2018
package-dist.json update rxjs dependency Sep 9, 2018
package-lock.json fix for #11 - custom breadcrumb not showing for parents Sep 6, 2018
package.json update rxjs dependency Sep 9, 2018
style.css npm package Mar 10, 2017
tsconfig.json project restructure - changed build to be based on [angular-npm-modul… Jun 28, 2017
tslint.json project restructure - changed build to be based on [angular-npm-modul… Jun 28, 2017

Angular Breadcrumb


npm install angular-crumbs --save

1. Import the BreadcrumbModule

Import BreadcrumbModule in the NgModule of your application.

import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {BreadcrumbModule} from 'angular-crumbs';

    imports: [
    bootstrap: [AppComponent]
export class AppModule {}

2. Set breadcumbs in app.routes

export const rootRouterConfig: Routes = [  
    {path: '', redirectTo: 'home', pathMatch: 'full'},  
    {path: 'home', ..., data: { breadcrumb: 'Home'}},  
    {path: 'about', ..., data: { breadcrumb: 'About'}},  
    {path: 'github', ..., data: { breadcrumb: 'GitHub'},  
        children: [  
            {path: '', ...},  
            {path: ':org', ..., data: { breadcrumb: 'Repo List'},  
                children: [  
                    {path: '', ...},  
                    {path: ':repo', ..., data: { breadcrumb: 'Repo'}}  

3. Update the markup

  • Import the style.css into your web page
  • Add <breadcrumb></breadcrumb> tag in template of your application component.

Demo (live)


Template Customization

You can BYO template using the breadcrumb's ng-content transclude.

bootstrap breadcrumb:

<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 *ngIf="route.terminal" class="breadcrumb-item active" aria-current="page">{{ route.displayName }}</li>

@angular/material breadcrumb

<breadcrumb #parent>
    <span class="breadcrumb" *ngFor="let route of parent.breadcrumbs">
        <a mat-button *ngIf="!route.terminal" href="" [routerLink]="[route.url]">{{ route.displayName }}</a>
        <a mat-button *ngIf="route.terminal">{{ route.displayName }}</a>

primeng breadcrumb

<p-breadcrumb [model]="breadcrumbs"></p-breadcrumb>
export class AppComponent {
    breadcrumbs: MenuItem[];

    constructor(private breadcrumbService: BreadcrumbService) { }

    ngOnInit() {
        this.breadcrumbService.breadcrumbChanged.subscribe(crumbs => {
            this.breadcrumbs = => this.toPrimeNgMenuItem(c));

    private toPrimeNgMenuItem(crumb: Breadcrumb) {
        return <MenuItem>{ label: crumb.displayName, url: `#${crumb.url}`}

Dynamic breadcrumbs

Use BreadcrumbService to set the breadcrumb description dynamically. See full demo example

ngOnInit() {
    .getRepoForOrg(, this.repo)
    .subscribe(repoDetails => {


Dynamic page titles

Use BreadcrumbService to subscribe to breadcrumb changes. See full demo example

ngOnInit() {
  this.breadcrumbService.breadcrumbChanged.subscribe((crumbs) => {



You can’t perform that action at this time.