Awesome breadcrumbs for Angular!

An awesome library to easily add breadcrumbs to your Angular application.

• Simply add breadcrumb labels to your Angular routing
• It supports asynchronous (reactive) breadcrumbs
• Flexible configuration. However you like to roll!
• Angular Material and PrimeNG examples included (on roadmap)

Existing breadcrumb libraries do not seem to support async (reactive) breadcrumbs. Also, this library provides many different configuration options.

npm install ngx-breadcrumpy

yarn add ngx-breadcrumpy

Just add a breadcrumb data property to your routes.

export const ROUTES: Routes = [
  {
    path: 'about',
    component: AboutComponent,
    data: { breadcrumb: 'About' }
  },
  {
    path: 'products',
    data: { breadcrumb: 'Products' }
  }
];

Now, import the BreadcrumbsModule and add the included breadcrumb component to your template:

<bcy-breadcrumbs></bcy-breadcrumbs>
<router-outlet></router-outlet>

Alternatively, implement your own breadcrumb component using the BREADCRUMBS injection token:

import { Component, Inject } from '@angular/core';
import { Observable } from 'rxjs';
import { Breadcrumb, BREADCRUMBS } from 'ngx-breadcrumpy';

@Component({
  selector: 'app-breadcrumb',
  template: `
    <ng-container *ngFor="let b of breadcrumbs$ | async; last as last">
      <a [routerLink]="b.urlSegments">{{ b.label }}</a> <span *ngIf="!last"> / </span>
    </ng-container>
  `
})
export class BreadcrumbComponent {
  constructor(@Inject(BREADCRUMBS) public breadcrumbs$: Observable<Breadcrumb[]>) {}
}

A breadcrumb contains the following properties:

export interface Breadcrumb {
  /**
   * Label of the breadcrumb.
   */
  label: string;

  /**
   * Icon of the breadcrumb.
   */
  icon?: string;

  /**
   * Url to the breadcrumb (if not loading), if not using RouterLink.
   */
  url?: string;

  /**
   * Url segments to the breadcrumb (if not loading), useful for RouterLink.
   */
  urlSegments?: any[];

  /**
   * True if the breadcrumb is being loaded.
   */
  loading?: boolean;
}

Instead of static breadcrumbs, you may want to make your breadcrumb labels more dynamic. There are several ways to do this!

The breadcrumb configuration can be of many types:

• string (label)
• BreadcrumbLiteral (object with label and optionally an icon)
• Observable<string | BreadcrumbLiteral>
• (route: ActivatedRouteSnapshot) => string
• (route: ActivatedRouteSnapshot) => BreadcrumbLiteral
• (route: ActivatedRouteSnapshot) => Observable<string | BreadcrumbLiteral>
• Type<BreadcrumbResolver>

Of course you can also make combinations. Please find some examples below.

A function which returns a string, BreadcrumbLiteral or Observable<string | BreadcrumbLiteral>.

export const ROUTES: Routes = [
  {
    path: 'product/:id',
    data: {
      breadcrumb: (route: ActivatedRouteSnapshot) => `Product ${route.paramMap.get('id')}` 
    }
  }
];

You can also use a special BreadcrumbResolver service to benefit from dependency injection. The resolve method should return either a string, BreadcrumbLiteral or Observable<string | BreadcrumbLiteral>.

Asynchronous observables will not block the routing process, but make the breadcrumb appear when resolved.

export const ROUTES: Routes = [
  {
    path: 'product/:id',
    data: { breadcrumb: YourBreadcrumbResolver }
  }
];

@Injectable({ providedIn: 'root' })
class YourBreadcrumbResolver implements BreadcrumbResolver {
  public resolve(route: ActivatedRouteSnapshot): Observable<string> {
    // just some example of an async breadcrumb label...
    return of(`Product ${route.paramMap.get('id')}`).pipe(delay(300));
  }
}

If you want to stick with resolve guards from @angular/router, you can. They will will dynamically add the breadcrumb property to your route.

export const ROUTES: Routes = [
  {
    path: 'product/:id',
    resolve: { breadcrumb: YourResolveGuard }
  }
];

@Injectable({ providedIn: 'root' })
class YourResolveGuard implements Resolve<string | BreadcrumbLiteral> {
  /* ... */
}

NOTE: keep in mind that the resolve guards from Angular Router are blocking! To get around this, use the previously mentioned BreadcrumbResolver. You can also make your guard return an Observable<Observable<string | BreadcrumbLiteral>>. Breadcrumpy will automatically support this.

Just provide a BREADCRUMB_KEY token in your root module to change the default breadcrumb property name.

import { BREADCRUMB_KEY } from 'ngx-breadcrumpy';

@NgModule({
  providers: [
    {
      provide: BREADCRUMB_KEY,
      useValue: 'yourBreadcrumb'
    }
  ]
})
class AppModule {}

Just implement your own breadcrumb component and use translation pipes for your breadcrumb labels.

Thanks goes to these wonderful people (emoji key):

Dirk Luijk 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!