How to set bootstrap navbar active class with Angular JS?

The question:

If I have a navbar in bootstrap with the items

Home | About | Contact

How do I set the active class for each menu item when they are active? That is, how can I set class="active" when the angular route is at

  1. #/ for home
  2. #/about for the about page
  3. #/contact for the contact page

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

A very elegant way is to use ng-controller to run a single controller outside of the ng-view:

<div class="collapse navbar-collapse" ng-controller="HeaderController">
    <ul class="nav navbar-nav">
        <li ng-class="{ active: isActive('/')}"><a href="/" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Home</a></li>
        <li ng-class="{ active: isActive('/dogs')}"><a href="/dogs" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Dogs</a></li>
        <li ng-class="{ active: isActive('/cats')}"><a href="/cats" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Cats</a></li>
    </ul>
</div>
<div ng-view></div>

and include in controllers.js:

function HeaderController($scope, $location) 
{ 
    $scope.isActive = function (viewLocation) { 
        return viewLocation === $location.path();
    };
}

Method 2

I just wrote a directive to handle this, so you can simply add the attribute bs-active-link to the parent <ul> element, and any time the route changed, it will find the matching link, and add the active class to the corresponding <li>.

You can see it in action here: http://jsfiddle.net/8mcedv3b/

Example HTML:

<ul class="nav navbar-nav" bs-active-link>
  <li><a href="/home" rel="nofollow noreferrer noopener">Home</a></li>
  <li><a href="/contact" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Contact</a></li>
</ul>

Javascript:

angular.module('appName')
.directive('bsActiveLink', ['$location', function ($location) {
return {
    restrict: 'A', //use as attribute 
    replace: false,
    link: function (scope, elem) {
        //after the route has changed
        scope.$on("$routeChangeSuccess", function () {
            var hrefs = ['/#' + $location.path(),
                         '#' + $location.path(), //html5: false
                         $location.path()]; //html5: true
            angular.forEach(elem.find('a'), function (a) {
                a = angular.element(a);
                if (-1 !== hrefs.indexOf(a.attr('href'))) {
                    a.parent().addClass('active');
                } else {
                    a.parent().removeClass('active');   
                };
            });     
        });
    }
}
}]);

Method 3

You can have a look at AngularStrap, the navbar directive seems to be what you are looking for:

https://github.com/mgcrea/angular-strap/blob/master/src/navbar/navbar.js

.directive('bsNavbar', function($location) {
  'use strict';

  return {
    restrict: 'A',
    link: function postLink(scope, element, attrs, controller) {
      // Watch for the $location
      scope.$watch(function() {
        return $location.path();
      }, function(newValue, oldValue) {

        $('li[data-match-route]', element).each(function(k, li) {
          var $li = angular.element(li),
            // data('match-rout') does not work with dynamic attributes
            pattern = $li.attr('data-match-route'),
            regexp = new RegExp('^' + pattern + '$', ['i']);

          if(regexp.test(newValue)) {
            $li.addClass('active');
          } else {
            $li.removeClass('active');
          }

        });
      });
    }
  };
});

To use this directive:

  1. Download AngularStrap from http://mgcrea.github.io/angular-strap/

  2. Include the script on your page after bootstrap.js:
    <script src="lib/angular-strap.js"></script>

  3. Add the directives to your module:
    angular.module('myApp', ['$strap.directives'])

  4. Add the directive to your navbar:
    <div class="navbar" bs-navbar>

  5. Add regexes on each nav item:
    <li data-match-route="/about"><a href="#/about" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">About</a></li>

Method 4

Here’s a simple approach that works well with Angular.

<ul class="nav navbar-nav">
    <li ng-class="{ active: isActive('/View1') }"><a href="#/View1" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 1</a></li>
    <li ng-class="{ active: isActive('/View2') }"><a href="#/View2" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 2</a></li>
    <li ng-class="{ active: isActive('/View3') }"><a href="#/View3" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 3</a></li>
</ul>

Within your AngularJS controller:

$scope.isActive = function (viewLocation) {
     var active = (viewLocation === $location.path());
     return active;
};

Method 5

If you are working with Angular router, the RouterLinkActive
directive
can be used really elegantly:

<ul class="navbar-nav">
  <li class="nav-item"><a class="nav-link" routerLink="home" routerLinkActive="active">Home</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="gallery" routerLinkActive="active">Gallery</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="pricing" routerLinkActive="active">Prices</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="contact" routerLinkActive="active">Contact</a></li>
</ul>

Method 6

First and foremost, this problem can be solved in a lot of ways. This way might not be the most elegant, but it cerntainly works.

Here is a simple solution you should be able to add to any project. You can just add a “pageKey” or some other property when you configure your route that you can use to key off of. Additionally, you can implement a listener on the $routeChangeSuccess method of the $route object to listen for the successful completion of a route change.

When your handler fires you get the page key, and use that key to locate elements that need to be “ACTIVE” for this page, and you apply the ACTIVE class.

Keep in mind you need a way to make ALL the elements “IN ACTIVE”. As you can see i’m using the .pageKey class on my nav items to turn them all off, and I’m using the .pageKey_{PAGEKEY} to individually turn them on. Switching them all to inactive, would be considered a naive approach, potentially you’d get better performance by using the previous route to make only active items inactive, or you could alter the jquery selector to only select active items to be made inactive. Using jquery to select all active items is probably the best solution because it ensures everything is cleaned up for the current route in case of any css bugs that might have been present on the previous route.

Which would mean changing this line of code:

$(".pagekey").toggleClass("active", false);

to this one

$(".active").toggleClass("active", false);

Here is some sample code:

Given a bootstrap navbar of

<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <a class="brand" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Title</a>
        <ul class="nav">
            <li><a href="#!/" rel="nofollow noreferrer noopener" class="pagekey pagekey_HOME">Home</a></li>
            <li><a href="#!/page1/create" rel="nofollow noreferrer noopener" class="pagekey pagekey_CREATE">Page 1 Create</a></li>
            <li><a href="#!/page1/edit/1" rel="nofollow noreferrer noopener" class="pagekey pagekey_EDIT">Page 1 Edit</a></li>
            <li><a href="#!/page1/published/1" rel="nofollow noreferrer noopener" class="pagekey pagekey_PUBLISH">Page 1 Published</a></li>
        </ul>
    </div>
</div>

And an angular module and controller like the following:

<script type="text/javascript">

    function Ctrl($scope, $http, $routeParams, $location, $route) {

    }



    angular.module('BookingFormBuilder', []).
        config(function ($routeProvider, $locationProvider) {
            $routeProvider.
                when('/', { 
                   template: 'I'm on the home page', 
                   controller: Ctrl, 
                   pageKey: 'HOME' }).
                when('/page1/create', { 
                   template: 'I'm on page 1 create', 
                   controller: Ctrl, 
                   pageKey: 'CREATE' }).
                when('/page1/edit/:id', { 
                   template: 'I'm on page 1 edit {id}', 
                   controller: Ctrl, pageKey: 'EDIT' }).
                when('/page1/published/:id', { 
                   template: 'I'm on page 1 publish {id}', 
                   controller: Ctrl, pageKey: 'PUBLISH' }).
                otherwise({ redirectTo: '/' });

            $locationProvider.hashPrefix("!");
        }).run(function ($rootScope, $http, $route) {

            $rootScope.$on("$routeChangeSuccess", 
                           function (angularEvent, 
                                     currentRoute,
                                     previousRoute) {

                var pageKey = currentRoute.pageKey;
                $(".pagekey").toggleClass("active", false);
                $(".pagekey_" + pageKey).toggleClass("active", true);
            });

        });

</script>

Method 7

You can actually use angular-ui-utilsui-route directive:

<a ui-route ng-href="/" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Home</a>
<a ui-route ng-href="/about" rel="nofollow noreferrer noopener">About</a>
<a ui-route ng-href="/contact" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Contact</a>

or:

Header Controller

/**
 * Header controller
 */
angular.module('myApp')
  .controller('HeaderCtrl', function ($scope) {
    $scope.menuItems = [
      {
        name: 'Home',
        url:  '/',
        title: 'Go to homepage.'
      },
      {
        name:   'About',
        url:    '/about',
        title:  'Learn about the project.'
      },
      {
        name:   'Contact',
        url:    '/contact',
        title:  'Contact us.'
      }
    ];
  });

Index page

<!-- index.html: -->
<div class="header" ng-controller="HeaderCtrl">
  <ul class="nav navbar-nav navbar-right">
    <li ui-route="{{menuItem.url}}" ng-class="{active: $uiRoute}"
      ng-repeat="menuItem in menuItems">
      <a ng-href="#{{menuItem.url}}" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="{{menuItem.title}}">
        {{menuItem.name}}
      </a>
    </li>
  </ul>
</div>

If you’re using ui-utils, you may also be interested in ui-router for managing partial/nested views.

Method 8

I find all of these answers a bit over complicated for me, sorry. So I have created a small directive that should work on a per navbar basis:

app.directive('activeLink', function () {
    return {
        link: function (scope, element, attrs) {
            element.find('.nav a').on('click', function () {
                angular.element(this)
                    .parent().siblings('.active')
                    .removeClass('active');
                angular.element(this)
                    .parent()
                    .addClass('active');
            });
        }
    };
});

Usage:

<ul class="nav navbar-nav navbar-right" active-link>
    <li class="nav active"><a href="home" rel="nofollow noreferrer noopener">Home</a></li>
    <li class="nav"><a href="foo" rel="nofollow noreferrer noopener">Foo</a></li>
    <li class="nav"><a href="bar" rel="nofollow noreferrer noopener">Bar</a></li>
</ul>

Method 9

I use ng-class directive with $location to achieve it.

<ul class="nav">
<li data-ng-class="{active: ($location.path() == '/') }">
    <a href="#/" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Carpeta Amarilla</a>
</li>
<li class="dropdown" data-ng-class="{active: ($location.path() == '/auditoria' || $location.path() == '/auditoria/todos') }">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">
        Auditoria
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu pull-right">
        <li data-ng-class="{active: ($location.path() == '/auditoria') }">
            <a href="#/auditoria" rel="nofollow noreferrer noopener">Por Legajo</a>
        </li>
        <li data-ng-class="{active: ($location.path() == '/auditoria/todos') }">
            <a href="#/auditoria/todos" rel="nofollow noreferrer noopener">General</a>
        </li>
    </ul>
</li>
</ul>

It requires the navbar to be inside a main Controller with access to $location service like this:

bajasApp.controller('MenuCntl', ['$scope','$route', '$routeParams', '$location', 
   function MenuCntl($scope, $route, $routeParams, $location) {
   $scope.$route = $route;
   $scope.$location = $location;
   $scope.$routeParams = $routeParams;
}]);

Method 10

If you use ui-router, the following example should satisfy your needs based on @DanPantry’s comment on the accepted answer without adding any controller-side code:

<div class="collapse navbar-collapse" ng-controller="HeaderController">
    <ul class="nav navbar-nav">
        <li ui-sref-active="active"><a ui-sref="app.home()" href="/" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Home</a></li>
        <li ui-sref-active="active"><a ui-sref="app.dogs()" href="/dogs" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Dogs</a></li>
        <li ui-sref-active="active"><a ui-sref="app.cats()" href="/cats" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Cats</a></li>
    </ul>
</div>
<div ng-view></div>

You can check the docs for more info on it.

Method 11

You can achieve this with a conditional in an angular expression, such as:

<a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" class="{{ condition ? 'active' : '' }}">link</a>

That being said, I do find an angular directive to be the more “proper” way of doing it, even though outsourcing a lot of this mini-logic can somewhat pollute your code base.

I use conditionals for GUI styling every once in a while during development, because it’s a little quicker than creating directives. I couldn’t tell you an instance though in which they actually remained in the code base for long. In the end I either turn it into a directive or find a better way to solve the problem.

Method 12

If you would rather not use AngularStrap then this directive should do the trick!. This is a modification of https://stackoverflow.com/a/16231859/910764.

JavaScript

angular.module('myApp').directive('bsNavbar', ['$location', function ($location) {
  return {
    restrict: 'A',
    link: function postLink(scope, element) {
      scope.$watch(function () {
        return $location.path();
      }, function (path) {
        angular.forEach(element.children(), (function (li) {
          var $li = angular.element(li),
            regex = new RegExp('^' + $li.attr('data-match-route') + '$', 'i'),
            isActive = regex.test(path);
          $li.toggleClass('active', isActive);
        }));
      });
    }
  };
}]);

HTML

<ul class="nav navbar-nav" bs-navbar>
  <li data-match-route="/home"><a href="#/home" rel="nofollow noreferrer noopener">Home</a></li>
  <li data-match-route="/about"><a href="#/about" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">About</a></li>
</ul>

Note: The above HTML classes assume you are using Bootstrap 3.x

Method 13

Heres my take on it. A little of a combination of answers found on this post. I had a slightly different case, so my solution involves separating the menu into its own template to be used within the Directive Definition Ojbect then add my navbar to the page I needed it on. Basically, I had a login page that I didnt want to include my menu on, so I used ngInclude and insert this directive when logged in:

DIRECTIVE:

module.directive('compModal', function(){


return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: true,
    templateUrl: 'templates/menu.html',
    controller: function($scope, $element, $location){
        $scope.isActive = function(viewLocation){

            var active = false;

            if(viewLocation === $location.path()){
                active = true;
            }

            return active;

        }
    }
 }
});

DIRECTIVE TEMPLATE (templates/menu.html)

<ul class="nav navbar-nav">
  <li ng-class="{ active: isActive('/View1') }"><a href="#/View1" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 1</a></li>
  <li ng-class="{ active: isActive('/View2') }"><a href="#/View2" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 2</a></li>
  <li ng-class="{ active: isActive('/View3') }"><a href="#/View3" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 3</a></li>
</ul>

HTML WHICH INCLUDES THE DIRECTIVE

<comp-navbar/>

Hope this helps

Method 14

Extending myl answer, I needed this to handle an structure like this.

-index

-events<-active
—event-list
—event-edit
—event-map <-clicked

-places
—place-list
—place-edit
—place-map

so instead of matching, I had to use indexOf, in order to validate children links which are formatted to match the condition. So for ‘events’:

<li ng-class="{ active: isActive('/event')}" class="divider-vertical dropdown">


function NavController($scope, $location) { 
$scope.isActive = function (viewLocation) {
    var s=false;
    if($location.path().indexOf(viewLocation) != -1){
     s = true;
    }
    return s;
};}

Method 15

This is a simple solution

<ul class="nav navbar-nav navbar-right navbar-default menu">
  <li ng-class="menuIndice == 1 ? 'active':''">
    <a ng-click="menuIndice = 1" href="#/item1" rel="nofollow noreferrer noopener">item1</a>
  </li>
  <li ng-class="menuIndice == 2 ? 'active':''">
    <a ng-click="menuIndice = 2" href="#/item2" rel="nofollow noreferrer noopener">item2</a>
  </li>
  <li ng-class="menuIndice == 3 ? 'active':''">
    <a ng-click="menuIndice = 3" href="#/item3" rel="nofollow noreferrer noopener">item3</a>
  </li>
</ul>

Method 16

Use an object as a switch variable.
You can do this inline quite simply with:

<ul class="nav navbar-nav">
   <li ng-class="{'active':switch.linkOne}" ng-click="switch = {linkOne: true}"><a href="/" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Link One</a></li>
   <li ng-class="{'active':switch.linkTwo}" ng-click="switch = {link-two: true}"><a href="/link-two" rel="nofollow noreferrer noopener">Link Two</a></li>
</ul>

Each time you click on a link the switch object is replaced by a new object where only the correct switch object property is true. The undefined properties will evaluate as false and so the elements which depend on them will not have the active class assigned.

Method 17

In conjunction with @Olivier’s AngularStrap answer, I also implemented kevinknelson’s answer from: https://github.com/twbs/bootstrap/issues/9013.

Natively, the Bootstrap3 navbar was not designed for a single-page (eg Angular) application and thus the menu when on a small screen was not collapsing upon click.

Method 18

JavaScript

/**
 * Main AngularJS Web Application
 */

var app = angular.module('yourWebApp', [
    'ngRoute'
]);


/**
 * Setup Main Menu
 */

app.controller('MainNavCtrl', [ '$scope', '$location', function ( $scope, $location) {
    $scope.menuItems = [
        {
            name: 'Home',
            url:  '/home',
            title: 'Welcome to our Website'
        },
        {
            name: 'ABOUT',
            url:  '/about',
            title: 'Know about our work culture'
        },
        {
            name:   'CONTACT',
            url:    '/contact',
            title:  'Get in touch with us'
        }
    ];

    $scope.isActive = function (viewLocation) {
        return viewLocation === $location.path();
    };
}]);

HTML

  <div class="navbar-collapse collapse" ng-controller="MainNavCtrl">
    <ul id="add-magic-line" class="nav navbar-nav navbar-right">
      <li data-ng-class="{current_page_item: isActive('{{ menuItem.url }}')}" data-ng-repeat="menuItem in menuItems">
        <a data-ng-href="#{{menuItem.url}}" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" title="{{menuItem.title}}">
          {{menuItem.name}}
        </a>
      </li>
    </ul>
  </div>

Method 19

Thanks to @Pylinux. I have used his technique and also modified it to support “one” level of drop down menu (sub ul/li), as that is what I needed. See it in action in the fiddle link below.

Updated Fiddle based on pylinux’s answer – http://jsfiddle.net/abhatia/en4qxw6g/

I made the following three changes, in order to support one level drop down menu:

1. Added a class value of dd (dropdown) for “a” element under li which needs to have sub ul list.

         <li><a class="dd">This link points to #/fun5</a>
          <ul>
            <li><a href="#/fun6?some=data" rel="nofollow noreferrer noopener">This link points to #/fun6</a>
            </li>
            <li><a href="#/fun7?some=data" rel="nofollow noreferrer noopener">This link points to #/fun7</a>
            </li>
            <li><a href="#/fun8?some=data" rel="nofollow noreferrer noopener">This link points to #/fun8</a>
            </li>
            <li><a href="#/fun9?some=data" rel="nofollow noreferrer noopener">This link points to #/fun9</a>
            </li>
          </ul>
        </li>

2. Updated Javascript to add the following new logic.

 if(angular.element(li).parent().parent().children('a').hasClass("dd"))
 {angular.element(li).parent().parent().children('a.dd').addClass('active');}

3. Updated CSS to the add the following:

a.active {background-color:red;}

Hopefully this will be helpful to someone looking to implement single level dropdown menu.

Method 20

You can also use this active-link directive https://stackoverflow.com/a/23138152/1387163

Parent li will get active class when location matches /url:

<li>
    <a href="#!/url" rel="nofollow noreferrer noopener" active-link active-link-parent>
</li>

Method 21

I suggest using a directive on a link.
Here is the fiddle.

But its not perfect yet. Watch out for the hashbangs 😉

Here is the javascript for directive:

angular.module('link', []).
  directive('activeLink', ['$location', function(location) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs, controller) {
        var clazz = attrs.activeLink;
        var path = attrs.href;
        path = path.substring(1); //hack because path does not return including hashbang
        scope.location = location;
        scope.$watch('location.path()', function(newPath) {
          if (path === newPath) {
            element.addClass(clazz);
          } else {
            element.removeClass(clazz);
          }
        });
      }
    };
  }]);

and here is how it would be used in html:

<div ng-app="link">
  <a href="#/one" rel="nofollow noreferrer noopener" active-link="active">One</a>
  <a href="#/two" rel="nofollow noreferrer noopener" active-link="active">One</a>
  <a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" active-link="active">home</a>
</div>

afterwards styling with css:

.active{ color:red; }

Method 22

Just to add my two cents in the debate I have made a pure angular module (no jquery), and it will also work with hash urls containing data. (i.g. #/this/is/path?this=is&some=data)

You just add the module as a dependency and auto-active to one of the ancestors of the menu. Like this:

<ul auto-active>
    <li><a href="#/" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">main</a></li>
    <li><a href="#/first" rel="nofollow noreferrer noopener">first</a></li>
    <li><a href="#/second" rel="nofollow noreferrer noopener">second</a></li>
    <li><a href="#/third" rel="nofollow noreferrer noopener">third</a></li>
</ul>

And the module look like this:

(function () {
    angular.module('autoActive', [])
        .directive('autoActive', ['$location', function ($location) {
        return {
            restrict: 'A',
            scope: false,
            link: function (scope, element) {
                function setActive() {
                    var path = $location.path();
                    if (path) {
                        angular.forEach(element.find('li'), function (li) {
                            var anchor = li.querySelector('a');
                            if (anchor.href.match('#' + path + '(?=\?|$)')) {
                                angular.element(li).addClass('active');
                            } else {
                                angular.element(li).removeClass('active');
                            }
                        });
                    }
                }

                setActive();

                scope.$on('$locationChangeSuccess', setActive);
            }
        }
    }]);
}());

* (You can of course just use the directive part)

** It’s also worth noticing that this doesn’t work for empty hashes (i.g. example.com/# or just example.com) it needs to have at least example.com/#/ or just example.com#/. But this happens automatically with ngResource and the like.

Method 23

This did the trick for me:

  var domain = '{{ DOMAIN }}'; // www.example.com or dev.example.com
  var domain_index =  window.location.href.indexOf(domain);
  var long_app_name = window.location.href.slice(domain_index+domain.length+1); 
  // this turns http://www.example.com/whatever/whatever to whatever/whatever
  app_name = long_app_name.slice(0, long_app_name.indexOf('/')); 
  //now you are left off with just the first whatever which is usually your app name

then you use jquery(works with angular too) to add class active

$('nav a[href*="' + app_name+'"]').closest('li').addClass('active');

and of course the css:

.active{background:red;}

this works if you have your html like this:

<ul><li><a href="/ee" rel="nofollow noreferrer noopener">ee</a></li><li><a href="/dd" rel="nofollow noreferrer noopener">dd</a></li></ul>

this will atumatically add class active using the page url and color your background to red if your in www.somesite.com/ee thaen ee is the ‘app’ and it will be active

Method 24

This is long answered but I thought I’d share my way:

.run(function($rootScope, $state){
 $rootScope.$state = $state;
});

Template:

<ul class="nav navbar-nav">
    <li ng-class="{ active: $state.contains('View1') }"><a href="..." rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 1</a></li>
    <li ng-class="{ active: $state.contains('View2') }"><a href="..." rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 2</a></li>
    <li ng-class="{ active: $state.contains('View3') }"><a href="..." rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 3</a></li>
</ul>

For those using ui-router:

<ul class="nav navbar-nav">
        <li ui-sref-active="active"><a href="..." rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 1</a></li>
        <li ui-sref-active="active"><a href="..." rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 2</a></li>
        <li ui-sref-active="active"><a href="..." rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">View 3</a></li>
</ul>

For exact match (eg nested states?) use $state.name === 'full/path/to/state' or ui-sref-active-eq="active"

Method 25

Here’s another solution for anyone who might be interested. The advantage of this is it has fewer dependencies. Heck, it works without a web server too. So it’s completely client-side.

HTML:

<nav class="navbar navbar-inverse" ng-controller="topNavBarCtrl"">
<div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a>
    </div>
    <ul class="nav navbar-nav">
        <li ng-click="selectTab()" ng-class="getTabClass()"><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">Home</a></li>
        <li ng-repeat="tab in tabs" ng-click="selectTab(tab)" ng-class="getTabClass(tab)"><a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener">{{ tab }}</a></li>
    </ul>
</div>

Explanation:

Here we are generating the links dynamically from an angularjs model using the directive ng-repeat. Magic happens with the methods selectTab() and getTabClass() defined in the controller for this navbar presented below.

Controller:

angular.module("app.NavigationControllersModule", [])

// Constant named 'activeTab' holding the value 'active'. We will use this to set the class name of the <li> element that is selected.
.constant("activeTab", "active")

.controller("topNavBarCtrl", function($scope, activeTab){
    // Model used for the ng-repeat directive in the template.
    $scope.tabs = ["Page 1", "Page 2", "Page 3"];

    var selectedTab = null;

    // Sets the selectedTab.
    $scope.selectTab = function(newTab){
       selectedTab = newTab;
    };

    // Sets class of the selectedTab to 'active'.
    $scope.getTabClass = function(tab){
       return selectedTab == tab ? activeTab : "";
    };
});

Explanation:

selectTab() method is called using ng-click directive. So when the link is clicked, the variable selectedTab is set to the name of this link. In the HTML you can see that this method is called without any argument for Home tab so that it will be highlighted when the page loads.

The getTabClass() method is called via ng-class directive in the HTML. This method checks if the tab it is in is the same as the value of the selectedTab variable. If true, it returns “active” else returns “” which is applied as the class name by ng-class directive. Then whatever css you have applied to class active will be applied to the selected tab.

Method 26

Just you’ll have to add the required active-class with required color code.

Ex: ng-class="{'active': currentNavSelected}" ng-click="setNav"


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment