❤
npm
Sign UpSign In

aurelia-crumbs

1.0.2 • Public • Published

aurelia-crumbs

This is an aurelia breadcrumbs widget conceived as a custom element that renders your application router's active navigation instruction chain.

Getting Started

Download from npm:

  npm install aurelia-crumbs

In your applications main file:

aurelia.use
        .plugin(PLATFORM.moduleName('aurelia-crumbs'))
        ...

In your route declarations (that you pass to your router), you can now include an option breadcrumb property:

 
const routes: [ 
    {
        route: ['route1'],
        name: 'route1',
        moduleId: './routes/route1/route1',
        title: 'Route 1',
        breadcrumb: true
    },    
    {
        route: ['route2'],
        name: 'route2',
        moduleId: './routes/route2/route2',
        title: 'Route 2',
        breadcrumb: true
    }
];
 
export class App {
 
    ...
 
    configureRouter(routerConfig, router) {
        routerConfig.options.pushState = true;
        routerConfig.map(routes);
 
        this.registerNavigationSteps(routerConfig);
 
        this.router = router;
    }
    
    ...
}

In order for a route to be rendered by the breadcrumb widget, the route's config have breadcrumb === true and a truthy title.

Then, add the custom element somewhere in your application:

  <aurelia-crumbs config.bind="config"></aurelia-crumbs>

Configuration

The widget takes an optional config object which has one parameter:

  1. Separator: valid html string.

Dynamic route titles

If you want to dynamically change a route title in the widget, you can do the following:

@inject(AureliaRouter)
export class SomeRoute {
    constructor(router) {
        this.router = router;
    }
    
    attached() {
        this.router.currentInstruction.config.title = 'New Title';
    }
}

Readme

Keywords

Package Sidebar

Install

npm i aurelia-crumbs

Repository

github.com/istrau2/aurelia-crumbs

Homepage

github.com/istrau2/aurelia-crumbs#readme

Weekly Downloads

4

Version

1.0.2

License

CC0-1.0

Last publish

Collaborators

  • istrau2
Try on RunKit
Report malware