Skip to content
Awesome breadcrumbs for Angular
TypeScript HTML Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
projects
.all-contributorsrc
.editorconfig
.gitignore
.travis.yml
CHANGELOG.md
README.md
angular.json
commitlint.config.js
package.json
tsconfig.json
tslint.json
yarn.lock

README.md

Breadcrumpy 🍞

Awesome breadcrumbs for Angular!

NPM version NPM downloads Build status All Contributors

Overview

What? 🤔

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)

Why? 🤷‍♂️

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

Installation 🌩

npm
npm install ngx-breadcrumpy
yarn
yarn add ngx-breadcrumpy

Usage 🕹

Basic example

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' }
  }
];

a) Use the default breadcrumb component:

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

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

b) Or implement your own:

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.url">{{ b.label }}</a> <span *ngIf="!last"> / </span>
    </ng-container>
  `
})
export class BreadcrumbComponent {
  constructor(@Inject(BREADCRUMBS) public breadcrumbs$: Observable<Breadcrumb[]>) {}
}

Advanced configuration

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)
  • Breadcrumb (object with label and optionally an icon)
  • Observable<string | Breadcrumb>
  • (route: ActivatedRouteSnapshot) => string
  • (route: ActivatedRouteSnapshot) => Breadcrumb
  • (route: ActivatedRouteSnapshot) => Observable<string | Breadcrumb>
  • Type<BreadcrumbResolver>

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

1. Using functions

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

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

2. Using a BreadcrumbResolver

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

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));
  }
}

3. Using Resolve guards

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 | Breadcrumb> {
  /* ... */
}

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 | Breadcrumb>>. Breadcrumpy will automatically support this.

Using a different route property

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 {}

Using translations (i18n)

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

Contributors

Thanks goes to these wonderful people (emoji key):

Dirk Luijk
Dirk Luijk

💻 📖

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

You can’t perform that action at this time.