app.html

<link rel="stylesheet" type="text/css" href="../styles/styles.css">

<template>
	<require from='./nav-bar'></require>

	<nav-bar router.bind="router"></nav-bar>

	<div class="page-host">
		<router-view></router-view>
	</div>
</template>

app.js

import { Router, RouterConfiguration } from 'aurelia-router';
import { AuthorizeStep } from 'AuthorizeStep';

var title = 'Zoltu: RepoCreator';

var routes = [
	{ route: '', redirect: 'about' },
	{ route: 'repo-creator', moduleId: './repo-creator/index', nav: true, title: 'Try It!', authorize: true },
	{ route: 'pricing', moduleId: './pricing', nav: true, title: 'Pricing' },
	{ route: 'about', moduleId: './about', nav: true, title: 'About' },
	{ route: 'login', moduleId: './login', nav: false, title: 'Login' }
];

export class App {
	configureRouter(config, router) {
		config.title = this.title;
		config.addPipelineStep('authorize', AuthorizeStep);
		config.map(routes);
		this.router = router;
	};
}

gistfile1.txt

"Error instantiating NavBar.
------------------------------------------------
inner error: TypeError: Cannot read property 'call' of undefined
    at new NavBar (http://localhost:9000/output/nav-bar.js:24:48)
    at Object.construct (http://localhost:9000/jspm_packages/npm/core-js@0.9.7/modules/es6.reflect.js:47:25)
    at ClassActivator.invoke (http://localhost:9000/jspm_packages/github/aurelia/dependency-injection@0.7.1/metadata.js:183:26)
    at Container.invoke (http://localhost:9000/jspm_packages/github/aurelia/dependency-injection@0.7.1/container.js:198:35)
    at Array.<anonymous> (http://localhost:9000/jspm_packages/github/aurelia/dependency-injection@0.7.1/container.js:78:48)
    at Container.get [as superGet] (http://localhost:9000/jspm_packages/github/aurelia/dependency-injection@0.7.1/container.js:131:28)
    at Container.elementContainerGet [as get] (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.2/view-factory.js:27:17)
    at HtmlBehaviorResource.create (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.2/html-behavior.js:204:76)
    at applyInstructions (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.2/view-factory.js:79:33)
    at ViewFactory.create (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.2/view-factory.js:166:13)"

nav-bar.html

<template>
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle Navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#">
				<i class="fa fa-home"></i>
				<span>${router.title}</span>
			</a>
		</div>

		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
					<a href.bind="row.href">${row.title}</a>
				</li>
			</ul>

			<ul class="nav navbar-nav navbar-right">
				<li class="loader" if.bind="router.isNavigating">
					<i class="fa fa-spinner fa-spin fa-2x"></i>
				</li>
			</ul>
		</div>
	</nav>
</template>

nav-bar.js

import { Router } from 'aurelia-router';
import { customElement, bindable } from 'aurelia-framework';
import 'bootstrap/css/bootstrap.css!';
import 'font-awesome';

@customElement('nav-bar')
export class NavBar {
	@bindable router = null;
}