Integrating aurelia-plugins-tabs with the router


Is there an elegant way to integrate the tabs plugin with the router, so that a child router would open a tab?


If i understand correctly you want to have tabs UI but actually open routes.

This is how i do it with bootstrap tabs UI. I have this on 3 levels, but it should work on N levels.

import { PLATFORM } from 'aurelia-pal';

// This will open 3th nested child. 
// The actual route here is #/some-route/some-child-route/statistics
// Where some-child-route is again a tabs UI

export class SomeClassName { 
    configureRouter(config, router) {[
            { route: '', redirect: 'statistics' },
            { route: 'statistics', name: 'statistics', moduleId: PLATFORM.moduleName('./statistics/statistics'), nav: true, title: 'Statistics' },
            { route: 'status', name: 'status', moduleId: PLATFORM.moduleName('./status/status'), nav: true, title: 'Status' },

        this.router = router;

    <div class="page">
        <ul class="nav nav-tabs">
            <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
                <a href.bind="row.href">${row.title}</a>
    <div class="row page">