Navbar navbar.js

mgcrea.ngStrap.navbar

Add quick, dynamic navbar functionality to transition through active/inactive states.

Live demo 

$location.path() = "{{$location.path()}}";

Append a bs-navbarattribute to any element to activate the directive.

Use data-match-route attributes to any children navigation item that should be toggled active.

Heads up!

The directives also supports HTML5 mode, you just have to drop the hash symbol from the href.

Options

Options can be passed via data attributes, append the option name to data-, as in data-route-attr="".

Name type default description
activeClass string active Class to apply when the navigation item is active
routeAttr string data-match-route Attribute to test against $location.path()

Default options

You can override global defaults for the plugin with $navbarProvider.defaults

        
          angular.module('myApp')
          .config(function($navbarProvider) {
            angular.extend($navbarProvider.defaults, {
              activeClass: 'in'
            });
          })