How to highlight a current menu item

Question

Does AngularJS help in any way with setting an active class on the link for the current page   I imagine there is some magical way this is done  but I can t seem to find   My menu looks like     lt ul gt      lt li gt  lt a class  active  href   tasks  gt Tasks lt  a gt      lt li gt  lt a href   actions  gt Tasks lt  a gt    lt  ul gt    and I have controllers for each of them in my routes  TasksController and ActionsController   But I can t figure out a way to bind the  active  class on the a links to the controllers   Any hints

User · Answer

use angular-ui-router s ui-sref-active directive https   github com angular-ui ui-router wiki Quick-Reference statename   x000D   x000D   lt ul gt  x000D     lt li ui-sref-active  active  class  item  gt  x000D       lt a href ui-sref  app user  user   bilbobaggins     gt  bilbobaggins lt  a gt  x000D     lt  li gt  x000D     lt  --     -- gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

My solution to this problem  use route current in the angular template   As you have the  tasks route to highlight in your menu  you can add your own property menuItem to the routes declared by your module    routeProvider    when   tasks         menuItem   TASKS       templateUrl   my-templates tasks html       controller   TasksController         Then in your template tasks htmlyou can use following ng-class directive    lt a href  app html  tasks       ng-class   active   route current menuItem      TASKS    gt Tasks lt  a gt    In my opinion  this is much cleaner than all proposed solutions

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   e 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  e 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   And here is the fiddle  http   jsfiddle net gy2an 8

User · Answer

In my case I resolved this problem by creating a simple controller responsible for the navigation  angular module  DemoApp      controller  NavigationCtrl      scope     location   function   scope   location         scope isCurrentPath   function  path          return  location path      path                  And by just adding ng-class to the element like so    lt ul class  nav  ng-controller  NavigationCtrl  gt     lt li ng-class    active  isCurrentPath         gt  lt a href      gt Home lt  a gt  lt  li gt     lt li ng-class    active  isCurrentPath   about      gt  lt a href    about  gt About lt  a gt  lt  li gt     lt li ng-class    active  isCurrentPath   contact      gt  lt a href    contact  gt Contact lt  a gt  lt  li gt   lt  ul gt

User · Answer

Here is an extension on kfis directive that I did to allow for different levels of path matching   Essentially I found the need for matching URL paths upto a certain depth  as exact matching doesn t allow for nesting and default state redirections   Hope this helps        directive  selectedLink      location   function location        return           restrict   A           scope               selectedLink                              link  function scope  element  attrs  controller                var level   scope selectedLink              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                    var i 0                  p   path split                       n   newPath split                       for  i   i  lt  p length  i                           if  p i      undefined     n i      undefined      p i     n i     break                                         if    i-1   gt   level                        element addClass  selected                                           else                       element removeClass  selected                                                                                   And here is how I use the link   lt nav gt       lt a href    info project list   selected-link  2  gt Project lt  a gt       lt a href    info company list  selected-link  2  gt Company lt  a gt       lt a href    info person list   selected-link  2  gt Person lt  a gt   lt  nav gt    This directive will match the depth level specified in the attribute value for the directive   Just means it can be used elsewhere many times over

User · Answer

I found the easiest solution  just to compare indexOf in HTML   var myApp   angular module  myApp         myApp run function  rootScope         rootScope  on   locationChangeStart   function event  next  current               rootScope isCurrentPath    location path                      lt li class    isCurrentPath indexOf  help   gt -1    active           gt   lt a href     help   gt            Help          lt  a gt   lt  li gt

User · Answer

I just wrote a directive for this   Usage    lt ul class  nav navbar-nav  gt     lt li active gt  lt a href    link1  gt Link 1 lt  a gt  lt  li gt     lt li active gt  lt a href    link2  gt Link 2 lt  a gt  lt  li gt   lt  ul gt    Implementation   angular module  appName      directive  active   function   location   timeout        return         restrict   A         link  function  scope  element  attrs               Whenever the user navigates to a different page            scope  on   routeChangeSuccess   function                   Defer for other directives to load first  this is important              so that in case other directives are used that this directive              depends on  such as ng-href  the href is evaluated before              it s checked here             timeout function                     Find link inside li element             var  link   element children  a   first                    Get current location             var currentPath    location path                    Get location the link is pointing to             var linkPath    link attr  href   split      pop                    If they are the same  it means the user is currently                on the same page the link would point to  so it should                be marked as such             if  currentPath     linkPath                    element  addClass  active                  else                    If they re not the same  a li element that is currently                  marked as active needs to be  un-marked                element removeClass  active                                                                   Tests    use strict    describe  Directive  active   function            load the directive s module   beforeEach module  appName        var element        scope        location        compile        rootScope        timeout     beforeEach inject function   rootScope   location   compile   timeout        scope    rootScope  new        location    location      compile    compile      rootScope    rootScope      timeout    timeout            describe  with an active link   function          beforeEach function               Trigger location change       location path   foo                 describe  href   function            beforeEach function                 Create and compile element with directive  note that the link            is the same as the current location after the location change          element   angular element   lt li active gt  lt a href    foo  gt Foo lt  a gt  lt  li gt             element   compile element  scope               Broadcast location change  the directive waits for this signal         rootScope  broadcast   routeChangeSuccess                Flush timeout so we don t have to write asynchronous tests             The directive defers any action using a timeout so that other            directives it might depend on  such as ng-href  are evaluated            beforehand          timeout flush                     it  adds the class  active  to the li   function              expect element hasClass  active    toBeTruthy                           describe  ng-href   function            beforeEach function                 Create and compile element with directive  note that the link            is the same as the current location after the location change             however this time with an ng-href instead of an href          element   angular element   lt li active gt  lt a ng-href    foo  gt Foo lt  a gt  lt  li gt             element   compile element  scope               Broadcast location change  the directive waits for this signal         rootScope  broadcast   routeChangeSuccess                Flush timeout so we don t have to write asynchronous tests             The directive defers any action using a timeout so that other            directives it might depend on  such as ng-href  are evaluated            beforehand          timeout flush                     it  also works with ng-href   function              expect element hasClass  active    toBeTruthy                               describe  with an inactive link   function          beforeEach function               Trigger location change       location path   bar              Create and compile element with directive  note that the link          is the NOT same as the current location after the location change        element   angular element   lt li active gt  lt a href    foo  gt Foo lt  a gt  lt  li gt           element   compile element  scope             Broadcast location change  the directive waits for this signal       rootScope  broadcast   routeChangeSuccess              Flush timeout so we don t have to write asynchronous tests           The directive defers any action using a timeout so that other          directives it might depend on  such as ng-href  are evaluated          beforehand        timeout flush                 it  does not add the class  active  to the li   function            expect element hasClass  active    not toBeTruthy                     describe  with a formerly active link   function          beforeEach function               Trigger location change       location path   bar              Create and compile element with directive  note that the link          is the same as the current location after the location change           Also not that the li element already has the class  active            This is to make sure that a link that is active right now will          not be active anymore when the user navigates somewhere else        element   angular element   lt li class  active  active gt  lt a href    foo  gt Foo lt  a gt  lt  li gt           element   compile element  scope             Broadcast location change  the directive waits for this signal       rootScope  broadcast   routeChangeSuccess              Flush timeout so we don t have to write asynchronous tests           The directive defers any action using a timeout so that other          directives it might depend on  such as ng-href  are evaluated          beforehand        timeout flush                 it  removes the  active  class from the li   function            expect element hasClass  active    not toBeTruthy

User · Answer

Here is the solution that I came up with after reading some of the excellent suggestions above  In my particular situation  I was trying to use Bootstrap tabs component as my menu  but didn t want to use the Angular-UI version of this because I want the tabs to act as a menu  where each tab is bookmark-able  rather than the tabs acting as navigation for a single page   See http   angular-ui github io bootstrap   tabs if you re interested in what the Angular-UI version of bootstrap tabs looks like    I really liked kfis s answer about creating your own directive to handle this  however it seemed cumbersome to have a directive that needed to be placed on every single link  So I ve created my own Angular directive which is placed instead once on the ul  Just in case any one else is trying to do the same thing  I thought I d post it here  though as I said  many of the above solutions work as well  This is a slightly more complex solution as far as the javascript goes  but it creates a reusable component with minimal markup   Here is the javascript for the directive and the route provider for ng view   var app   angular module  plunker     ui bootstrap       config    routeProvider   function  routeProvider         routeProvider          when   One    templateUrl   one html             when   Two    templateUrl   two html             when   Three    templateUrl   three html             otherwise  redirectTo    One              directive  navTabs      location   function location        return           restrict   A           link  function scope  element                var  ul     element                ul addClass  nav nav-tabs                 var  tabs    ul children                var tabMap                    tabs each function                   var  li     this                   Substring 1 to remove the   at the beginning  because location path   below does not return the                  tabMap  li find  a   attr  href   substring 1      li                               scope location   location              scope  watch  location path     function newPath                     tabs removeClass  active                    tabMap newPath  addClass  active                                               Then in your html you simply    lt ul nav-tabs gt     lt li gt  lt a href    One  gt One lt  a gt  lt  li gt     lt li gt  lt a href    Two  gt Two lt  a gt  lt  li gt     lt li gt  lt a href    Three  gt Three lt  a gt  lt  li gt   lt  ul gt   lt ng view gt  lt  -- Content will appear here -- gt  lt  ng view gt    Here s the plunker for it  http   plnkr co edit xwGtGqrT7kWoCKnGDHYN p preview

User · Answer

Using a directive  since we are doing DOM manipulation here  the following is probably the closest to doing things the  angular way     scope timeFilters         value  3600  label   1 hour        value  10800  label   3 hours        value  21600  label   6 hours        value  43200  label   12 hours        value  86400  label   24 hours        value  604800  label   1 week      angular module  whatever       directive  filter  function    return      restrict   A       template    lt li ng-repeat  time in timeFilters  class  filterItem  gt  lt a ng-click  changeTimeFilter time   gt   time label   lt  a gt  lt  li gt        link  function linkFn scope  lElement  attrs            var menuContext   attrs filter           scope changeTimeFilter   function newTime             scope selectedtimefilter   newTime                      lElement bind  click   function cevent               var currentSelection   angular element cevent srcElement  parent                var previousSelection   scope menuContext                if previousSelection     currentSelection                   if previousSelection                       angular element previousSelection  removeClass  active                                     scope menuContext    currentSelection                   scope  apply function                        currentSelection addClass  active                                                             Then your HTML would look like    lt ul class  dropdown-menu  filter  times  gt  lt  ul gt

User · Answer

None of the above directive suggestions were useful to me   If you have a bootstrap navbar like this    lt ul class  nav navbar-nav  gt       lt li gt  lt a ng-href      gt Home lt  a gt  lt  li gt       lt li gt  lt a ng-href    about  gt About lt  a gt  lt  li gt         lt  ul gt     that could be a   yo angular startup  then you want to add  active to the parent  lt li gt  element class list  not the element itself  i e  lt li class  active  gt    lt  li gt   So I wrote this     directive  setParentActive      location   function  location      return       restrict   A       link  function scope  element  attrs  controller          var classActive   attrs setParentActive     active             path   attrs ngHref replace                 scope location    location        scope  watch  location path     function newPath            if  path    newPath              element parent   addClass classActive             else             element parent   removeClass classActive                                      usage set-parent-active   active is default so not needed to be set    lt li gt  lt a ng-href    about  set-parent-active gt About lt  a gt  lt  li gt    and the parent  lt li gt  element will be  active when the link is active   To use an alternative  active class like  highlight  simply    lt li gt  lt a ng-href    about  set-parent-active  highlight  gt About lt  a gt  lt  li gt

User · Answer

If you want the links for the directive in a wrapper rather than selecting each individual link  makes it easier to look at the scope in Batarang   this works pretty well too     angular module  app   directive  navigation           location   function  location          return           restrict   A           scope              link  function scope  element              var classSelected  navLinks             scope location    location             classSelected    selected              navLinks   element find  a               scope  watch  location path     function newPath                var el              el   navLinks filter   href      newPath                       navLinks not el  closest  li   removeClass classSelected               return el closest  li   addClass classSelected                                                  Markup would just be        lt nav role  navigation  data-navigation gt           lt ul gt               lt li gt  lt a href   messages  gt Messages lt  a gt  lt  li gt               lt li gt  lt a href   help  gt Help lt  a gt  lt  li gt               lt li gt  lt a href   details  gt Details lt  a gt  lt  li gt           lt  ul gt       lt  nav gt    I should also mention that I am using  full-fat  jQuery in this example  but you can easily alter what I have done with the filtering and so on

User · Answer

Most important for me was not to change at all the bootstrap default code  Here it is my menu controller that search for menu options and then add the behavior we want   file  header js function HeaderCtrl   scope   http   location       scope menuLinkList         defineFunctions  scope     addOnClickEventsToMenuOptions  scope   location      function defineFunctions   scope       scope menuOptionOnClickFunction   function          for   var index in  scope menuLinkList          var link    scope menuLinkList index         if  this hash     link hash            link parentElement className    active           else           link parentElement className                             function addOnClickEventsToMenuOptions   scope   location      var liList   angular element find  li      for   var index in liList        var liElement   liList index       var link   liElement firstChild      link onclick    scope menuOptionOnClickFunction       scope menuLinkList push link       var path   link hash replace               if   location path       path          link parentElement className    active                      lt script src  resources js app header js  gt  lt  script gt    lt div class  navbar navbar-fixed-top  ng controller  HeaderCtrl  gt       lt div class  navbar-inner  gt         lt div class  container-fluid  gt           lt button type  button  class  btn btn-navbar  data-toggle  collapse  data-target   nav-collapse  gt             lt span class  icon-bar  gt  lt  span gt   lt span class  icon-bar  gt  lt  span gt    lt span     class  icon-bar  gt  lt  span gt           lt  button gt           lt a class  brand  href     gt   lt img src  resources img fom-logo png            style  width  80px  height  auto   gt           lt  a gt           lt div class  nav-collapse collapse  gt             lt ul class  nav  gt               lt li gt  lt a href    platforms  gt PLATFORMS lt  a gt  lt  li gt               lt li gt  lt a href    functionaltests  gt FUNCTIONAL TESTS lt  a gt  lt  li gt             lt  ul gt            lt  div gt         lt  div gt       lt  div gt     lt  div gt

User · Answer

You can implement this very simply  here is an example    lt div ng-controller  MenuCtrl  gt     lt ul class  menu  gt       lt li ng-class  menuClass  home    gt  lt a href   home  gt Page1 lt  a gt  lt  li gt       lt li ng-class  menuClass  about    gt  lt a href   about  gt Page2 lt  a gt  lt  li gt     lt  ul gt    lt  div gt      And your Controller should be this   app controller  MenuCtrl   function  scope   location       scope menuClass   function page        var current    location path   substring 1       return page     current    active

User · Answer

Using Angular Version 6 with Bootstrap 4 1  I was able to get it done like as seen below   In the example below  when the URL sees   contact   the bootstrap active is then added to the html tag  When the URL changes it is then removed    lt ul gt   lt li class  nav-item  routerLink   contact  routerLinkActive  active  gt       lt a class  nav-link  href   contact  gt Contact lt  a gt   lt  li gt   lt  ul gt       This directive lets you add a CSS class to an element when the link s   route becomes active     Read more on Angular website

User · Answer

The answer from  Renan-tomal-fernandes is good  but needed a couple of improvements to work correctly  As it was  it d always detect the link to the home page       as triggered  even if you were in another section   So I improved it a little bit  here s the code  I work with Bootstrap so the active part is in the  lt li gt  element instead of the the  lt a gt    Controller   scope getClass   function path        var cur path    location path   substr 0  path length       if  cur path    path            if  location path   substr 0  length  gt  1  amp  amp  path length    1               return             else             return  active         else           return               Template   lt div class  nav-collapse collapse  gt     lt ul class  nav  gt       lt li ng-class  getClass       gt  lt a href      gt Home lt  a gt  lt  li gt       lt li ng-class  getClass   contents     gt  lt a href    contests   gt Contents lt  a gt  lt  li gt       lt li ng-class  getClass   data     gt  lt a href    data   gt Your data lt  a gt  lt  li gt     lt  ul gt   lt  div gt

User · Answer

Here s a simple approach that works well with Angular     lt ul 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       This thread has a number of other similar answers   How to set bootstrap navbar active class with Angular JS

User · Answer

Here s my two cents  this works just fine   NOTE  This does not match childpages  which is what I needed    View    lt a ng-class   active  isCurrentLocation   my-path      href   my-path   gt    Some link  lt  a gt    Controller      make sure you inject  location as a dependency   scope isCurrentLocation   function path       return path      location path

User · Answer

had same problem  Here is my solution    directive  whenActive             location         location - gt        scope  true        link   scope  element  attr - gt          scope  on   routeChangeSuccess                 - gt              loc        location path               href   element attr  href               state   href indexOf loc              substate   -1              if href length  gt  3               substate   loc indexOf href              if loc length is 2               state   -1               console log  Is Loc    loc   in Href    href       state   and Substate     substate              if state isnt -1 or substate isnt -1               element addClass  selected                element parent   addClass  current-menu-item              else if href is     and loc is                    element addClass  selected                element parent   addClass  current-menu-item              else               element removeClass  selected                element parent   removeClass  current-menu-item

User · Answer

on view   lt a ng-class  getClass   tasks    href   tasks  gt Tasks lt  a gt    on controller   scope getClass   function  path      return   location path   substr 0  path length      path     active            With this the tasks link will have the active class in any url that starts with   tasks  e g    tasks 1 reports

User · Answer

According to  kfis  s answer  it s comments  and my recommend  the final directive as below    directive  activeLink      location   function  location        return         restrict   A         link  function scope  element  attrs  controller            var clazz   attrs activeLink                  var path   attrs href  attrs ngHref          path   path substring 1     hack because path does not return including hashbang         scope location   location          scope  watch  window location href   function                var newPath    window location pathname   window location search  substr 1             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

scope getClass   function  path    return String   location absUrl   split      0   indexOf path    gt  -1    active            lt li class  listing-head  ng-class  getClass   v bookings    gt  lt a href   v bookings  gt MY BOOKING lt  a gt  lt  li gt   lt li class  listing-head  ng-class  getClass   v fleets    gt  lt a href   v fleets  gt MY FLEET lt  a gt  lt  li gt   lt li class  listing-head  ng-class  getClass   v adddriver    gt  lt a href   v adddriver  gt ADD DRIVER lt  a gt  lt  li gt   lt li class  listing-head  ng-class  getClass   v bookings    gt  lt a href   v invoice  gt INVOICE lt  a gt  lt  li gt   lt li class  listing-head  ng-class  getClass   v profile    gt  lt a href   v profile  gt MY PROFILE lt  a gt  lt  li gt   lt li class  listing-head  gt  lt a href   v logout  gt LOG OUT lt  a gt  lt  li gt

User · Answer

For AngularUI Router users    lt a ui-sref-active  active  ui-sref  app  gt    And that will place an active class on the object that is selected

User · Answer

I had similar problem with menu located outside the controller scope  Not sure if this is best solution or a recommended one but this is what worked for me  I ve added the following to my app configuration   var app   angular module  myApp     app run function  rootScope   location      rootScope menuActive   function url  exactMatch       if  exactMatch         return  location path      url            else         return  location path   indexOf url     0                  Then in the view I have     lt li gt  lt a href     ng-class   true   active   menuActive      true    gt Home lt  a gt  lt  li gt   lt li gt  lt a href   register  ng-class   true   active   menuActive   register     gt   lt li gt     lt  li gt

User · Answer

Here is yet another directive to highlight active links   Key features    Works fine with href that contains dynamic angular expressions Compatible with hash-bang navigation  Compatible with Bootstrap where active class should be applied to parent li not the link itself Allows make link active if any nested path is active Allows make link disabled if it is not active   Code    directive  activeLink      location    function  location        return           restrict   A           link  function scope  elem  attrs                var path   attrs activeLink    activeLink     href               var target   angular isDefined attrs activeLinkParent    elem parent     elem              var disabled   angular isDefined attrs activeLinkDisabled    true   false              var nested   angular isDefined attrs activeLinkNested    true   false               function inPath needle  haystack                    var current    haystack    needle                   if  nested                        current     haystack indexOf needle           0                                      return current                             function toggleClass linkPath  locationPath                       remove hash prefix and trailing slashes                 linkPath   linkPath   linkPath replace            replace                                   locationPath   locationPath replace                               if  linkPath  amp  amp  inPath linkPath  locationPath                         target addClass  active                        if  disabled                            target removeClass  disabled                                            else                       target removeClass  active                        if  disabled                            target addClass  disabled                                                                          watch if attribute value changes   evaluated             attrs  observe path  function linkPath                    toggleClass linkPath   location path                                     watch if location changes             scope  watch                  function                         return  location path                                         function newPath                        toggleClass attrs path   newPath                                                             Usage   Simple example with angular expression  lets say  scope var   2  then link will be active if location is  url 2     lt a href     url   var    active-link gt    Bootstrap example  parent li will get active class    lt li gt       lt a href     url  active-link active-link-parent gt   lt  li gt    Example with nested urls  link will be active if any nested url is active  i e   url 1   url 2  url 1 2        lt a href     url  active-link active-link-nested gt    Complex example  link points to one url   url1  but will be active if another is selected   url2     lt a href     url1  active-link     url2  active-link-nested gt    Example with disabled link  if it is not active it will have  disabled  class    lt a href     url  active-link active-link-disabled gt    All active-link-  attributes can be used in any combination  so very complex conditions could be implemented

User · Answer

There is a ng-class directive  which binds variable and css class  It also accepts the object  className vs bool value pairs    Here is the example  http   plnkr co edit SWZAqj

User · Answer

The route    routeProvider when   Account      templateUrl    Home Account   controller   HomeController        The menu html    lt li id  liInicio  ng-class    active  url   account    gt    The controller   angular module  Home   controller  HomeController   function   scope   http   location         scope url    location url   replace     g      toLowerCase          The problem I found here is that the menu item is active only when the full page is loaded  When the partial view is loaded the menu doesn t change  Somebody knows why it happens

User · Answer

I suggest using a directive on a link   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

For those using ui-router  my answer is somewhat similar to Ender2050 s  but I prefer doing this via state name testing    scope isActive   function  stateName      var active    stateName      state current name     return active       corresponding HTML    lt ul class  nav nav-sidebar  gt       lt li ng-class    active  isActive  app home      gt  lt a ui-sref  app home  gt Dashboard lt  a gt  lt  li gt       lt li ng-class    active  isActive  app tiles      gt  lt a ui-sref  app tiles  gt Tiles lt  a gt  lt  li gt   lt  ul gt

User · Answer

I did it like this   var myApp   angular module  myApp     ngRoute      myApp directive  trackActive   function  location        function link scope  element  attrs           scope  watch function                 return  location path               function                var links   element find  a                links removeClass  active                angular forEach links  function value                   var a   angular element value                   if  a attr  href             location path                          a addClass  active                                                            return  link  link         This enables you to have links in a section that has track-active directive    lt nav track-active gt        lt a href      gt Page 1 lt  a gt        lt a href    page2  gt Page 2 lt  a gt        lt a href    page3  gt Page 3 lt  a gt   lt  nav gt    This approach seems much cleaner than others  to me   Also  if you are using jQuery  you can make it a lot neater because jQlite only has basic selector support  A much cleaner version with jquery included before angular include would look like this   myApp directive  trackActive   function  location        function link scope  element  attrs           scope  watch function                 return  location path               function                element find  a   removeClass  active   find   href      location path         addClass  active                          return  link  link         Here is a jsFiddle

[angularjs] How to highlight a current menu item?

Examples related to angularjs