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       for home   about for the about page   contact for the contact page

User · Answer

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    Download AngularStrap from http   mgcrea github io angular-strap    Include the script on your page after bootstrap js   lt script src  lib angular-strap js  gt  lt  script gt    Add the directives to your module  angular module  myApp      strap directives      Add the directive to your navbar   lt div class  navbar  bs-navbar gt    Add regexes on each nav item   lt li data-match-route   about  gt  lt a href    about  gt About lt  a gt  lt  li gt

User · Answer

A very elegant way is to use ng-controller to run a single controller outside of the ng-view    lt div class  collapse navbar-collapse  ng-controller  HeaderController  gt       lt ul class  nav navbar-nav  gt           lt li ng-class    active  isActive        gt  lt a href     gt Home lt  a gt  lt  li gt           lt li ng-class    active  isActive   dogs     gt  lt a href   dogs  gt Dogs lt  a gt  lt  li gt           lt li ng-class    active  isActive   cats     gt  lt a href   cats  gt Cats lt  a gt  lt  li gt       lt  ul gt   lt  div gt   lt div ng-view gt  lt  div gt    and include in controllers js   function HeaderController  scope   location           scope isActive   function  viewLocation             return viewLocation      location path

User · Answer

You can achieve this with a conditional in an angular expression  such as    lt a href     class     condition    active           gt link lt  a gt    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

User · Answer

You can actually use angular-ui-utils  ui-route directive    lt a ui-route ng-href     gt Home lt  a gt   lt a ui-route ng-href   about  gt About lt  a gt   lt a ui-route ng-href   contact  gt Contact lt  a gt    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   lt  -- index html  -- gt   lt div class  header  ng-controller  HeaderCtrl  gt     lt ul class  nav navbar-nav navbar-right  gt       lt li ui-route    menuItem url    ng-class   active   uiRoute         ng-repeat  menuItem in menuItems  gt         lt a ng-href     menuItem url    title    menuItem title    gt            menuItem name          lt  a gt       lt  li gt     lt  ul gt   lt  div gt    If you re using ui-utils  you may also be interested in ui-router for managing partial nested views

User · Answer

Use an object as a switch variable  You can do this inline quite simply with    lt ul class  nav navbar-nav  gt      lt li ng-class    active  switch linkOne   ng-click  switch    linkOne  true   gt  lt a href     gt Link One lt  a gt  lt  li gt      lt li ng-class    active  switch linkTwo   ng-click  switch    link-two  true   gt  lt a href   link-two  gt Link Two lt  a gt  lt  li gt   lt  ul gt    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

User · Answer

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   lt div class  navbar navbar-inverse  gt       lt div class  navbar-inner  gt           lt a class  brand  href     gt Title lt  a gt           lt ul class  nav  gt               lt li gt  lt a href       class  pagekey pagekey HOME  gt Home lt  a gt  lt  li gt               lt li gt  lt a href     page1 create  class  pagekey pagekey CREATE  gt Page 1 Create lt  a gt  lt  li gt               lt li gt  lt a href     page1 edit 1  class  pagekey pagekey EDIT  gt Page 1 Edit lt  a gt  lt  li gt               lt li gt  lt a href     page1 published 1  class  pagekey pagekey PUBLISH  gt Page 1 Published lt  a gt  lt  li gt           lt  ul gt       lt  div gt   lt  div gt    And an angular module and controller like the following    lt script type  text javascript  gt       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                                  lt  script gt

User · Answer

Here s a simple approach that works well with Angular     lt ul class  nav navbar-nav  gt       lt li ng-class    active  isActive   View1      gt  lt a href    View1  gt View 1 lt  a gt  lt  li gt       lt li ng-class    active  isActive   View2      gt  lt a href    View2  gt View 2 lt  a gt  lt  li gt       lt li ng-class    active  isActive   View3      gt  lt a href    View3  gt View 3 lt  a gt  lt  li gt   lt  ul gt    Within your AngularJS controller    scope isActive   function  viewLocation         var active    viewLocation      location path          return active

User · Answer

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    lt div ng-app  link  gt     lt a href    one  active-link  active  gt One lt  a gt     lt a href    two  active-link  active  gt One lt  a gt     lt a href     active-link  active  gt home lt  a gt   lt  div gt    afterwards styling with css    active  color red

User · Answer

This is a simple solution   lt ul class  nav navbar-nav navbar-right navbar-default menu  gt     lt li ng-class  menuIndice    1    active      gt       lt a ng-click  menuIndice   1  href    item1  gt item1 lt  a gt     lt  li gt     lt li ng-class  menuIndice    2    active      gt       lt a ng-click  menuIndice   2  href    item2  gt item2 lt  a gt     lt  li gt     lt li ng-class  menuIndice    3    active      gt       lt a ng-click  menuIndice   3  href    item3  gt item3 lt  a gt     lt  li gt   lt  ul gt

User · Answer

You can also use this active-link directive https   stackoverflow com a 23138152 1387163  Parent li will get active class when location matches  url    lt li gt       lt a href     url  active-link active-link-parent gt   lt  li gt

User · Answer

I use ng-class directive with  location to achieve it    lt ul class  nav  gt   lt li data-ng-class   active    location path              gt       lt a href      gt Carpeta Amarilla lt  a gt   lt  li gt   lt li class  dropdown  data-ng-class   active    location path        auditoria      location path        auditoria todos      gt       lt a class  dropdown-toggle  data-toggle  dropdown  href     gt          Auditoria          lt b class  caret  gt  lt  b gt       lt  a gt       lt ul class  dropdown-menu pull-right  gt           lt li data-ng-class   active    location path        auditoria      gt               lt a href    auditoria  gt Por Legajo lt  a gt           lt  li gt           lt li data-ng-class   active    location path        auditoria todos      gt               lt a href    auditoria todos  gt General lt  a gt           lt  li gt       lt  ul gt   lt  li gt   lt  ul gt    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

User · Answer

I just wrote a directive to handle this  so you can simply add the attribute bs-active-link to the parent  lt ul gt  element  and any time the route changed  it will find the matching link  and add the active class to the corresponding  lt li gt     You can see it in action here  http   jsfiddle net 8mcedv3b   Example HTML    lt ul class  nav navbar-nav  bs-active-link gt     lt li gt  lt a href   home  gt Home lt  a gt  lt  li gt     lt li gt  lt a href   contact  gt Contact lt  a gt  lt  li gt   lt  ul gt    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

User · Answer

Just you ll have to add the required active-class with required color code    Ex  ng-class    active   currentNavSelected   ng-click  setNav

User · Answer

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     lt div class  navbar-collapse collapse  ng-controller  MainNavCtrl  gt       lt ul id  add-magic-line  class  nav navbar-nav navbar-right  gt         lt li data-ng-class   current page item  isActive     menuItem url        data-ng-repeat  menuItem in menuItems  gt           lt a data-ng-href     menuItem url    title    menuItem title    gt              menuItem name            lt  a gt         lt  li gt       lt  ul gt     lt  div gt

User · Answer

This is long answered but I thought I d share my way    run function  rootScope   state     rootScope  state    state        Template    lt ul class  nav navbar-nav  gt       lt li ng-class    active   state contains  View1      gt  lt a href       gt View 1 lt  a gt  lt  li gt       lt li ng-class    active   state contains  View2      gt  lt a href       gt View 2 lt  a gt  lt  li gt       lt li ng-class    active   state contains  View3      gt  lt a href       gt View 3 lt  a gt  lt  li gt   lt  ul gt    For those using ui-router    lt ul class  nav navbar-nav  gt           lt li ui-sref-active  active  gt  lt a href       gt View 1 lt  a gt  lt  li gt           lt li ui-sref-active  active  gt  lt a href       gt View 2 lt  a gt  lt  li gt           lt li ui-sref-active  active  gt  lt a href       gt View 3 lt  a gt  lt  li gt   lt  ul gt    For exact match  eg nested states   use  state name      full path to state  or ui-sref-active-eq  active

User · Answer

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    lt div class  collapse navbar-collapse  ng-controller  HeaderController  gt       lt ul class  nav navbar-nav  gt           lt li ui-sref-active  active  gt  lt a ui-sref  app home    href     gt Home lt  a gt  lt  li gt           lt li ui-sref-active  active  gt  lt a ui-sref  app dogs    href   dogs  gt Dogs lt  a gt  lt  li gt           lt li ui-sref-active  active  gt  lt a ui-sref  app cats    href   cats  gt Cats lt  a gt  lt  li gt       lt  ul gt   lt  div gt   lt div ng-view gt  lt  div gt    You can check the docs for more info on it

User · Answer

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 amp some data   You just add the module as a dependency and auto-active to one of the ancestors of the menu  Like this    lt ul auto-active gt       lt li gt  lt a href      gt main lt  a gt  lt  li gt       lt li gt  lt a href    first  gt first lt  a gt  lt  li gt       lt li gt  lt a href    second  gt second lt  a gt  lt  li gt       lt li gt  lt a href    third  gt third lt  a gt  lt  li gt   lt  ul gt    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   stackoverflow com a 22282124 1465640

User · Answer

Extending myl answer  I needed this to handle an structure like this   -index  -events lt -active ---event-list ---event-edit ---event-map  lt -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     lt li ng-class    active  isActive   event     class  divider-vertical dropdown  gt    function NavController  scope   location      scope isActive   function  viewLocation        var s false      if  location path   indexOf viewLocation     -1        s   true            return s

User · Answer

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    lt nav class  navbar navbar-inverse  ng-controller  topNavBarCtrl   gt   lt div class  container-fluid  gt       lt div class  navbar-header  gt           lt a class  navbar-brand  href     gt  lt span class  glyphicon glyphicon-home  aria-hidden  true  gt  lt  span gt  lt  a gt       lt  div gt       lt ul class  nav navbar-nav  gt           lt li ng-click  selectTab    ng-class  getTabClass    gt  lt a href     gt Home lt  a gt  lt  li gt           lt li ng-repeat  tab in tabs  ng-click  selectTab tab   ng-class  getTabClass tab   gt  lt a href     gt    tab    lt  a gt  lt  li gt       lt  ul gt   lt  div gt      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  lt li gt  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

User · Answer

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   lt ul class  nav navbar-nav  bs-navbar gt     lt li data-match-route   home  gt  lt a href    home  gt Home lt  a gt  lt  li gt     lt li data-match-route   about  gt  lt a href    about  gt About lt  a gt  lt  li gt   lt  ul gt    Note  The above HTML classes assume you are using Bootstrap 3 x

User · Answer

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    lt ul class  nav navbar-nav navbar-right  active-link gt       lt li class  nav active  gt  lt a href  home  gt Home lt  a gt  lt  li gt       lt li class  nav  gt  lt a href  foo  gt Foo lt  a gt  lt  li gt       lt li class  nav  gt  lt a href  bar  gt Bar lt  a gt  lt  li gt   lt  ul gt

User · Answer

If you are working with Angular router  the RouterLinkActive  directive can be used really elegantly    lt ul class  navbar-nav  gt     lt li class  nav-item  gt  lt a class  nav-link  routerLink  home  routerLinkActive  active  gt Home lt  a gt  lt  li gt     lt li class  nav-item  gt  lt a class  nav-link  routerLink  gallery  routerLinkActive  active  gt Gallery lt  a gt  lt  li gt     lt li class  nav-item  gt  lt a class  nav-link  routerLink  pricing  routerLinkActive  active  gt Prices lt  a gt  lt  li gt     lt li class  nav-item  gt  lt a class  nav-link  routerLink  contact  routerLinkActive  active  gt Contact lt  a gt  lt  li gt   lt  ul gt

User · Answer

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    lt ul class  nav navbar-nav  gt     lt li ng-class    active  isActive   View1      gt  lt a href    View1  gt View 1 lt  a gt  lt  li gt     lt li ng-class    active  isActive   View2      gt  lt a href    View2  gt View 2 lt  a gt  lt  li gt     lt li ng-class    active  isActive   View3      gt  lt a href    View3  gt View 3 lt  a gt  lt  li gt   lt  ul gt    HTML WHICH INCLUDES THE DIRECTIVE   lt comp-navbar  gt    Hope this helps

User · Answer

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                lt li gt  lt a class  dd  gt This link points to   fun5 lt  a gt             lt ul gt               lt li gt  lt a href    fun6 some data  gt This link points to   fun6 lt  a gt               lt  li gt               lt li gt  lt a href    fun7 some data  gt This link points to   fun7 lt  a gt               lt  li gt               lt li gt  lt a href    fun8 some data  gt This link points to   fun8 lt  a gt               lt  li gt               lt li gt  lt a href    fun9 some data  gt This link points to   fun9 lt  a gt               lt  li gt             lt  ul gt           lt  li gt     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

User · Answer

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    lt ul gt  lt li gt  lt a href   ee  gt ee lt  a gt  lt  li gt  lt li gt  lt a href   dd  gt dd lt  a gt  lt  li gt  lt  ul gt    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

User · Answer

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

[javascript] How to set bootstrap navbar active class with Angular JS?

Examples related to javascript

Examples related to twitter-bootstrap

Examples related to angularjs

Examples related to angularjs-directive

Examples related to navbar