Getting Started

1. Install

bower install eeh-navigation

2. Include

Include Dependencies

CSS

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />

JavaScript

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

Include eeh-navigation

CSS

<link rel="stylesheet" href="bower_components/eeh-navigation/dist/eeh-navigation.css"/>

JavaScript

<script src="bower_components/eeh-navigation/dist/eeh-navigation.js"></script>
<script src="bower_components/eeh-navigation/dist/eeh-navigation.tpl.js"></script>

3. Add Menu Items

angular.module('myApp', [
    'eehNavigation',
    'pascalprecht.translate',
    'ui.bootstrap',
    'ui.router'
])
.config(['eehNavigationProvider', function (eehNavigationProvider) {
    // Add nested user links to the "foo" menu.
    eehNavigationProvider
    .menuItem('foo.user', {
        text: 'Me',
        iconClass: 'fa-user'
    })
    .menuItem('foo.user.profile', {
        text: 'User Profile',
        iconClass: 'fa-user',
        href: '/user-profile'
    });

    // Add a menu item that links to "/home" to the "bar" menu.
    eehNavigationProvider
    .menuItem('bar.home', {
        text: 'Home',
        iconClass: 'fa-home',
        href: '/home'
    });
}]);

4. Use At Least One Navigation Directive

eeh-navigation-navbar

This directive adds a Twitter Bootstrap based navbar to the template. To associate the directive with the "myFirstMenu" menu defined in the previous step, use the menu-name attribute.

The navbar directive is used like so:

<eeh-navigation-navbar menu-name="'foo'"></eeh-navigation-navbar>

eeh-navigation-sidebar

This directive adds a sidebar, loosely based on the Twitter Bootstrap navbar component, to the template. If ui-router is used (which is recommended) then the sidebar directive should wrap a ui-view element. It should also be in a template that is at or near the top of the state hierarchy.

<eeh-navigation-sidebar menu-name="'bar'">
    <ui-view></ui-view>
</eeh-navigation-sidebar>