How to set bootstrap navbar active class with Angular JS?

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

Recitation

possible duplicate of Make Twitter Bootstrap navbar link active – Victualer

This is similar, but is not an "angular way" of highlighting the navigation buttons. – Recitation

Possible duplicate of Set active tab style with AngularJS – Toughen

If you are using Angular routing, please note that the perfect answer is buried way down below: https://mcmap.net/q/99212/-how-to-set-bootstrap-navbar-active-class-with-angular-js. – Medellin

Answer 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="/">Home</a></li>
        <li ng-class="{ active: isActive('/dogs')}"><a href="/dogs">Dogs</a></li>
        <li ng-class="{ active: isActive('/cats')}"><a href="/cats">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();
    };
}

Nigritude

Could this be put into a header directive? – Recitation

Yes, sure it can! That's actually how I'm using it myself :) – Nigritude

Since I am new to this I would appreciate if you could provide an example on how to put this into a header directive, please. – Rhyton

@Nigritude Awesome answer, but I just wanted to know, what is triggering isActive() to be reevaluated? It is that the controller subscribes to changes in the location or maybe clicking the element reevaluated ng-click? – Mouldon

Could there be any problems because HeaderController is not being added to the controllers module of the application? Is that necessary for this controller? – Malcah

inject $location as a dependency in directive and then use @Nigritude controller.js code above inside link: in the directive. – Useful

I would suggest using return $location.path().indexOf(viewLocation) == 0; instead so you can catch pages with parameters as well – Eyehole

@SvenHecht Good suggestion, most often you want to highlight section in the navigation, not just single pages. – Granuloma

Isn't using a function in ngClass frowned upon? Thought it was best practice to use scoped variables? – Realize

This also doesn't seem to work, I appears to be one route behind each time. I have to click a link twice to get $location.path to equal my viewLocation. – Realize

While this works. I think the controller should not handle UI related work. Correct me if this is not a valid concern. – Tabethatabib

Excellent!! I just used $location.url() instead of $location.path(), to include query params. – Parkland

@Nigritude it's working fine with me thanks,, But I just need to know why do you use one curly brackets {..} in ng-class not {{...}}.. – Julianejuliann

This gets the job done but its hardly elegant - the route name eg /dogs has to be duplicated in the call to isActive('/dogs') – Chowchow

If you are using UI Router, then you can use the ui-sref-active/ui-sref-active-eq directives, ie. ui-sref-active-eq='active' or ui-sref-active='active' to achieve the same results – Coverture

@SvenHecht The concern with that logic is that a home page link (/) would match every other path. – Haland

@SvenHecht - mwotten is correct "The concern with that logic is that a home page link (/) would match every other path." – Benghazi

@DanPantry your answer worked and is so much simpler than anything here. Thanks! – Luculent

While it's good to see the actual code, it'd be nice to see a bit of an explanation on the code rather than a copy-paste-able code. – Root

@Sadeep Requirement is to maintain the selected tab status. The code does the same but on the fly. When a tab is clicked and location changes, each tab's class function, i.e. isActive(), gets triggered and validates the need for 'active' class. Using a controller is the right and cleaner approach, as wal pointed out, the code doesnt follow DRY. Its also redundant to trigger the isActive() for all tabs for every click. One alternative is to make controller to maintain the json array of tab details and selected tab index. With that the html can use ng-repeat for generating <li>s in html. – Forester

I'm using ui-router and @DanPantry 's suggestion is so much easier when you use it along – Gypsie

Can I inject other class than 'active' e.g. "{ active-click: isActive('/')}" ? – Monitor

slightly modified version works perfect for me -> return $location.path().includes(viewLocation)... depending on the use case... – Desmoid

Answer 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">Home</a></li>
  <li><a href="/contact">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');   
                };
            });     
        });
    }
}
}]);

Orangy

i like this better than the accepted answer because there's no duplication of config data, i.e. the routes themselves remain in just one place and this just works.. – Excalibur

worked for me using scope.$watch("$routeChangeSuccess", function () { .... instead of scope.$on("$routeChangeSuccess", function () {.... – Servitude

Had to tweak this a little bit for my own purposes, but awesome answer! Easy enough to understand. – Hines

Answer 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">About</a></li>

Override

Thanks. This helped me fix my own directive ( the missing insight for me was the scope.$watch ) – Toby

Why is the element variable passed to the jquery selector? $('...', element) – Goods

@Goods the method takes 2 arguments - jQuery(selector, context) -- the second argument is to pass context of the selector, either parent DOM element or another jQuery object itself - read more here – Fleurette

This works perfectly for me - I had to make one change however, per mgcrea.github.io/angular-strap the directive to add to your module is mgcrea.ngStrap not $strap.directives – Reciprocal

Answer 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">View 1</a></li>
    <li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
    <li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>

Within your AngularJS controller:

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

Culbreth

Nice approach. I modified it little bit - used ng-class directive(ng-class={active: isActive('/View1')}) and updated the isActive function to return true/false instead of class name itself. – Hepsibah

I have copied everything like your example, and for me $location.path() did not worked... switched to $location.url(), and it worked! – Rickie

Answer 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>

Orthotropic

I think this should be the accepted answer (for angular 2+ at least), why implement something is already implemented? But for Bootstrap 3.3 the active class should be in the <li> (you can put the routerLinkActive with the routerLink or its parent) – Contrariety

Note: if you use / as your home page, routerLinkActive will consider that active for any URL beginning with /, e.g. /foo/, /foo/bar etc. To match exactly, you need routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}". – Medellin

Answer 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="#">Title</a>
        <ul class="nav">
            <li><a href="#!/" class="pagekey pagekey_HOME">Home</a></li>
            <li><a href="#!/page1/create" class="pagekey pagekey_CREATE">Page 1 Create</a></li>
            <li><a href="#!/page1/edit/1" class="pagekey pagekey_EDIT">Page 1 Edit</a></li>
            <li><a href="#!/page1/published/1" 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>

Doglike

You need to scroll to the right to see the pageKey values on the routes, that's the key to this whole solution. – Doglike

This may work, but is against the general advice for Angular.js apps: in Angular you should refrain from messing with the DOM using jQuery; if you have to touch the DOM, write a directive. – Rashidarashidi

this is perfect, if the dom manipulation bothers you, just add a directive on the .navbar, add a $broadcast event in routechangesuccess, $rootScope.$broadcast('routeChanged', current.pageKey); and then capture it on your directive and do the dom manipulations there – Barcroft

Answer 7

You can actually use angular-ui-utils' ui-route directive:

<a ui-route ng-href="/">Home</a>
<a ui-route ng-href="/about">About</a>
<a ui-route ng-href="/contact">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}}" 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.

Amando

The ui-route approach is very seducing but so far I didn't manage to make it work on the project generated by Yeoman's angular generator. – Myalgia

@gabuzo: Did you install angular-ui-utils via bower? – Guilbert

Answer 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">Home</a></li>
    <li class="nav"><a href="foo">Foo</a></li>
    <li class="nav"><a href="bar">Bar</a></li>
</ul>

Georgiegeorgina

Your method works only after you click a link in the nav bar. If you start on a URL that is "Foo", "Home" will initially be selected still. e.g. starting on localhost:9000/#/contact causes the Home to appear selected in the nav bar. – Hairball

Answer 9

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

<ul class="nav">
<li data-ng-class="{active: ($location.path() == '/') }">
    <a href="#/">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="#">
        Auditoria
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu pull-right">
        <li data-ng-class="{active: ($location.path() == '/auditoria') }">
            <a href="#/auditoria">Por Legajo</a>
        </li>
        <li data-ng-class="{active: ($location.path() == '/auditoria/todos') }">
            <a href="#/auditoria/todos">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;
}]);

Chapfallen

Answer 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="/">Home</a></li>
        <li ui-sref-active="active"><a ui-sref="app.dogs()" href="/dogs">Dogs</a></li>
        <li ui-sref-active="active"><a ui-sref="app.cats()" href="/cats">Cats</a></li>
    </ul>
</div>
<div ng-view></div>

You can check the docs for more info on it.

Gypsie

perfect! surely the cleanest solution – Remonaremonetize

quite simply the best solution going. who doesn't use ui.router! – Tommie

Answer 11

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

<a href="#" 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.

Commutative

Answer 12

If you would rather not use AngularStrap then this directive should do the trick!. This is a modification of https://mcmap.net/q/99212/-how-to-set-bootstrap-navbar-active-class-with-angular-js.

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">Home</a></li>
  <li data-match-route="/about"><a href="#/about">About</a></li>
</ul>

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

Vulgus

Answer 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">View 1</a></li>
  <li ng-class="{ active: isActive('/View2') }"><a href="#/View2">View 2</a></li>
  <li ng-class="{ active: isActive('/View3') }"><a href="#/View3">View 3</a></li>
</ul>

HTML WHICH INCLUDES THE DIRECTIVE

<comp-navbar/>

Hope this helps

Hurwit

The function can be shortened to just $scope.isActive = function (viewLocation) { return viewLocation === $location.path(); }; – Thrower

Answer 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;
};}

Feint

Answer 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">item1</a>
  </li>
  <li ng-class="menuIndice == 2 ? 'active':''">
    <a ng-click="menuIndice = 2" href="#/item2">item2</a>
  </li>
  <li ng-class="menuIndice == 3 ? 'active':''">
    <a ng-click="menuIndice = 3" href="#/item3">item3</a>
  </li>
</ul>

Heartland

Answer 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="/">Link One</a></li>
   <li ng-class="{'active':switch.linkTwo}" ng-click="switch = {link-two: true}"><a href="/link-two">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.

Corsiglia

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

Polymyxin

Answer 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}}" title="{{menuItem.title}}">
          {{menuItem.name}}
        </a>
      </li>
    </ul>
  </div>

Alisun

This does not work - it does not add the current class to the DOM – Mulvihill

Answer 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">This link points to #/fun6</a>
            </li>
            <li><a href="#/fun7?some=data">This link points to #/fun7</a>
            </li>
            <li><a href="#/fun8?some=data">This link points to #/fun8</a>
            </li>
            <li><a href="#/fun9?some=data">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.

Shark

Answer 20

You can also use this active-link directive https://mcmap.net/q/101324/-how-to-highlight-a-current-menu-item

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

<li>
    <a href="#!/url" active-link active-link-parent>
</li>

Allister

Answer 21

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">ee</a></li><li><a href="/dd">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

Washday

Answer 22

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" active-link="active">One</a>
  <a href="#/two" active-link="active">One</a>
  <a href="#" active-link="active">home</a>
</div>

afterwards styling with css:

.active{ color:red; }

Akkadian

Answer 23

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="#/">main</a></li>
    <li><a href="#/first">first</a></li>
    <li><a href="#/second">second</a></li>
    <li><a href="#/third">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.

• Here is the fiddle: http://jsfiddle.net/gy2an/8/
• Here is the github: https://github.com/Karl-Gustav/autoActive
• Here is my original answer: https://mcmap.net/q/101324/-how-to-highlight-a-current-menu-item

Vocal

That is just nasty. Reason to use Angular is for simplicity. – Benghazi

Answer 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="...">View 1</a></li>
    <li ng-class="{ active: $state.contains('View2') }"><a href="...">View 2</a></li>
    <li ng-class="{ active: $state.contains('View3') }"><a href="...">View 3</a></li>
</ul>

For those using ui-router:

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

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

Haller

Answer 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="#"><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="#">Home</a></li>
        <li ng-repeat="tab in tabs" ng-click="selectTab(tab)" ng-class="getTabClass(tab)"><a href="#">{{ 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.

Root

What happends is I navigate to another tab by any other mean ? – Jolda

What do you mean? – Root

for example a link in the page that takes you to another page that is within other tab. Makes sense? – Jolda

In that case I think it's better to use ui-router as suggested by Muli Yulzary in answer above. ui-router assigns a state to each url. So, once someone click on the link, user will be routed to that link and the state of the angular app will be updated. Then ui-sref="active" will highlight the tab. Here's documentation for angular 2: ui-router.github.io/ng2. Also, instead of using the normal bootstrap look at UI Bootstrap done for use with Angular apps. UI Bootstrap: angular-ui.github.io/bootstrap – Root

Answer 26

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

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

Yazbak