ui-navbar - Responsive navigation bar with submenu in AngularJS
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
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
angular ;
3. Configure the controller
angular
4. Html parts
ui-view
to attach the partials.
Add <!-- Hook here the partials -->
Button
Add a multi-level menu to a drop down button rendering the previously introduced items:
<div btn-group="" uib-dropdown=""> <button uib-dropdown-toggle="" type="button" class="btn btn-primary"> Dropdown <b class="caret"></b> </button> <tree tree="konami"></tree></div>
Navigation bar with separated multi-level dropdown menu.
Specify an array of states for each menu item in the navigation bar:
Toggle navigation Konami <!-- Collect the nav links, forms, and other content for toggling --> Dropdown Just a clone Dropdown right Just a clone right <!-- /.navbar-collapse -->
Navigation bar with a single tree structure
Specify an array representing the all tree, with all the states and subtree for of each state if required.
Toggle navigation Games <!-- Collect the nav links, forms, and other content for toggling --> <!-- /.navbar-collapse -->
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
<trees>
to specify the navigation bar in a all-in-one fashion. - Updated the documentation, demo and plunker.
Prefix
- Prefixed
angular-ui-bootstrap
components in theindex.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.