Nuclear Package Magnet

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published


    npm version

    ng2-breadrumbs is a module for Angular that generates a breadcrumb for any page of your application. It is based on the built-in Angular router.



    Getting started

    1.Install ng6-breadcrumbs via npm:

    npm install --save ng6-breadcrumbs

    2.Import the BreadcrumbsModule within your app:

    import {BreadcrumbsModule} from "ng6-breadcrumbs";
      imports: [

    3.Add a name to your route by adding a breadcrumb property in the route's data:

    export const ROUTES: Routes = [
        {path: '', redirectTo: 'home', pathMatch: 'full'},
            path: 'home',
            loadChildren: 'app/home/home.module#HomeModule',
            data: {
                breadcrumb: 'Home'
            path: 'stores',
            loadChildren: 'app/stores/stores.module#StoresModule',
            data: {
                breadcrumb: 'Stores'

    4.Put the BreadcrumbsComponent's selector within your template:

    <breadcrumb [allowBootstrap]="true"></breadcrumb>
    1. Then your StoresModule's routes will look like this:
    const STORE_ROUTES: Routes = [
            path: '',
            component: StoresComponent
            path: 'books',
            data: {
                breadcrumb: 'Books'
            loadChildren: 'app/books/books.module#BooksModule'

    Adding dynamic routes

    In case you want a dynamic breadcrumb name, you can pass it as a :breadcrumb route parameter when navigating: Route:

    //Add an extra route parameter that will contain the breadcrumb name
    const BOOK_ROUTES: Routes = [
            path: '',
            component: BooksComponent
            path: 'book/:id/:breadcrumb',
            component: BookComponent

    Router code:

        public goToBook(book: Book) {
            this.router.navigate(['book' , book.Id, book.Name], { relativeTo: this.route });

    Adding routes manually

    In case the router configuration does not satisfy the way you want to design your breadcrumb structure, you can do it manually through BreadcrumbsService. You can add your custom breadcrumbs through your route's routable component, for example:

    export class MyRoutableComponent {
      constructor( private breadcrumbsService:BreadcrumbsService) {
      ngOnInit() {[{label: 'Home' , url: '/', params: []},{label: 'Careers' , url: '/careers', params: []}, {label:  'MyCustomRouteLabel' , url: '', params: []} ])

    Prefixing routes

    Suppose that you already have your breadcrumbs generated, but due to the nesting of the routers, you want to add a breadcrumb from the parent router:

    this.breadcrumbs.storePrefixed({label: 'Home' , url: '/', params: []})

    Breadcrumb format

    The BreadcrumbsService's store' andstorePrefixed` methods breadcrumb objects. A breadcrumb object should contain:

    • label - The text displayed on the breadcrumb
    • url - The link that it leads to
    • params - A collection of route parameters


    1. Add more use cases (using routerLinks, for example).


    npm i ng6-breadcrumbs

    DownloadsWeekly Downloads






    Unpacked Size

    22.6 kB

    Total Files


    Last publish


    • ekavalionak