ui-navbar - Responsive navigation bar with submenu in AngularJS

!Bower

Introduction

Build a responsive navigation menu bar with sub-menu in a __recursive__ fashion using ui-router to load partials.

The directive can now be used in 3 different ways: buttons or icons, navbar with separated drop-down menu or single tree structure.

Plunkr live demo

- version < 0.14.x Live demo at Plunkr
- version > 2.2.0 Live demo at Plunkr

1. Installation

Via npm
``
npm install ui-navbar --save
`

or via Bower
`
bower install ui-navbar --save
`

2. Configure routing in your module adding required dependencies


`javascript
angular.module('App', ['ui.bootstrap', 'ui.router', 'ui.navbar'])

.config(function ($stateProvider, $urlRouterProvider) {

// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/home");

// Now set up the states
$stateProvider
.state('home', {
url: "/home",
templateUrl: "home.html"
})
.state('metal-gear', {
url: "/metal-gear",
templateUrl: "metal-gear.html"
})
.state('metal-gear2', {
url: "/metal-gear2",
templateUrl: "metal-gear2.html"
})
.state('metal-gear-solid', {
url: "/metal-gear-solid",
templateUrl: "metal-gear-solid.html"
});
});
`

3. Configure the controller


`javascript
angular.module('App').controller('NavigationController', function ($scope) {

$scope.konami = [{
name: "Konami",
link: "#",
subtree: [{
name: "Metal Gear",
link: "#",
subtree: [{
name: "Metal Gear",
link: "metal-gear"
}, {
name: "Metal Gear 2: Solid Snake",
link: "metal-gear2"
}, {
name: "Metal Gear Solid: The Twin Snakes",
link: "metal-gear-solid"
}]
}]
}];

$scope.trees = [{
name: "Konami",
link: "#",
subtree: [{
name: "Metal Gear",
link: "#",
subtree: [{
name: "Metal Gear",
link: "metal-gear"
}, {
name: "Metal Gear 2: Solid Snake",
link: "#"
}, {
name: "Metal Gear Solid: The Twin Snakes",
link: "#"
}]
}, {
name: "divider",
link: "#"
}, {
name: "Castlevania",
link: "#",
subtree: [{
...
}]
}]
}]
}
`

4. Html parts

$3


`html

`

$3

Add a multi-level menu to a drop down button rendering the previously introduced items:
`javascript

Dropdown

`

$3

Specify an array of states for each menu item in the navigation bar:
`html

`

$3

Specify an array representing the all tree, with all the states and subtree for of each
state if required.
`html

`

Features

- Recursive item menu definition in json format.
- Easy way to define a divider between items.
- Unlimited level of nesting.
- Responsive.
- Fully compatible with AngularJS.
- Standard Html5 with AngularJS Bootstrap attributes such as dropdown.
- Support tag navbar-right from Bootstrap with submenu opening on the left.
- __No jquery required__ to manage responsivness and dropdown actions.

Dependencies

- AngularJS, required 1.5.x, tested with 1.5.8.
- UI Boostrap, required 1.1.1, tested with 2.2.0.
- ui-router, required 0.2.15, tested with 0.3.1.
- Twitter Bootstrap, required 3.3.6, tested with 3.3.7.

Update


- Introduced the directive to specify the navigation bar in a _all-in-one_ fashion.
- Updated the documentation, demo and plunker.

Prefix

- Prefixed angular-ui-bootstrap components in the index.html demo page according to the migration guide.

Demo

From the folder demo type

npm install
node server.js

then type in a browser http://localhost:5000` to get the demo page working.