@nowzoo/ngx-crumbs

Router-based breadcrumb and window title components.

Project & README | Demo | Demo Source Code | Documentation

Quick start

npm i @nowzoo/ngx-crumbs --save

Import the module...

import { NgxCrumbsModule } from '@nowzoo/ngx-crumbs';
@NgModule({
  imports: [
    NgxCrumbsModule.forRoot()
  ],
})
export class AppModule { }

Add breadcrumbs to your route components using ng-template and the ngxCrumb directive. The content of the crumb can be dynamic...

<ng-template ngxCrumb>Dynamic: {{counter}}</ng-template>

To have the crumbs automatically update the window title, add the NgxCrumbsWindowTitleComponent to your app component...

<ngx-crumbs-window-title></ngx-crumbs-window-title>

By default the window title component displays breadcrumbs in reverse order and limited to the first and last ones. You can change this with the showAll and reverse inputs.

<ngx-crumbs-window-title [showAll]="true" [reverse]="false"></ngx-crumbs-window-title>

To display Bootstrap-style breadcrumbs, use NgxCrumbsComponent...

<ngx-crumbs></ngx-crumbs>

Contributing

Clone the main repo and npm install...

git clone https://github.com/nowzoo/ngx-libs.git
cd ngx-libs
npm i

The library files are in projects/ngx-crumbs.

The demo code is in projects/ngx-crumbs-demo.

Building the library...

ng build ngx-crumbs

Testing the library...

ng test ngx-crumbs

To test with Wallaby, use the wallaby.js config at the root of the project directory.

Serving the demo...

# make sure you've built the library locally first with ng build ngx-crumbs
ng serve ngx-crumbs-demo

Issues

Please submit issues to the main repo here.

License

MIT