AngularJS responsive navigation bar with recursive menu and submenu construction defined in json object
1 person uses it
Author: 2487288?v=3 blackat

ui-navbar - Responsive navigation bar with submenu in AngularJS

Bower NPM Build Status devDependency Status

Quick description

Build a responsive navigation menu bar with sub-menu in a recursive fashion using ui-router to load partials. The menu items as well as the corresponding states are set in a json object in the $scope as following:


  • 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.


  • AngularJS, required 1.4.x, tested with 1.4.8.
  • UI Boostrap, required 0.14.0, tested with 1.1.1.
  • ui-router, required 0.2.15, tested with 0.2.15.
  • Twitter Bootstrap, required 3.3.6, tested with 3.3.6.


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

How it's done

It is a collection of directives and templates to create recursively a navigation bar in AngularJS based on Html attributes used to define a dropdown menu defined in ui-boostrap package.

Dependencies are ui-boostrap to manage dropdown and collapse, then ui-router to manage routing to partials.

Plunkr live demo

  • version < 0.14.x Live demo at Plunkr
  • version > 0.14.x Live demo at Plunkr

How to setup the ui-navbar

1) Install ui-navbar

Via npm npm install ui-navbar --save

or via Bower bower install ui-navbar --save

2) Html part for the nav bar:

3) Html part to hook the partials

4) Configure routing in your module adding required dependencies

5) Configure the controller adding the menu item to be displayed in the nav bar


From the folder demo type

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

comments powered by Disqus
This page was last updated over 2 years ago.