# Active List Items from a Side Menu

**URL:** <https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104>\
**Category:** ionic-v1\
**Created:** [February 14, 2014, 3:01pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104 "2014-02-14T15:01:57Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [February 14, 2014, 3:01pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/1 "2014-02-14T15:01:57Z")

</div>

Similar to how tabs have an active class depending on if they are active or not, is this possible to do when using the side menus?

So my content pane has nav-view which will populate the data associated with the links from the side-menu.

I did some digging with the dev tools and saw that there is no active class being applied to the links in my menu, but there should be.

Has anyone accomplished this before or know of how to go about implementing this? Seems like this should be a built in feature to the side menu in my opinion.

```
       <side-menus>
          <!-- Center content -->
          <pane side-menu-content>
               <nav-view name="content"></nav-view>
          </pane>
        
          <!-- Left menu -->
          <side-menu side="left">
          <list>
              <item ng-repeat="item in items"></items>
          </side-menu>
        
          
        </side-menus>
```

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [February 14, 2014, 6:10pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/2 "2014-02-14T18:10:28Z")

</div>

Maybe it shouldn’t be as complicated as this but, you could use a directive on each side menu item. Then a controller/service to keep only one active at a time.

See this. Fascinating read but very complex. It’s how the Angular-UI folks manage to keep only one tab or dropdown open at a time:

> **[Let's Make Full-Ass AngularJS Directives](https://joelhooks.com/blog/2014/02/11/lets-make-full-ass-angularjs-directives/)**
>
> With best intentions we set forth to create the mighty directive. The steepest slope of the dreaded AngularJS learning curve. The "place where the jQuery goes." So what is a directive? We've talked about this before , and decided that they…

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [February 14, 2014, 7:45pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/3 "2014-02-14T19:45:48Z")

</div>

@Calendee seems like a point in the right direction. I’m going to try to see what I can come up with and I’ll report back

---

<div class="post-metadata">

**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\
**Post date:** [February 14, 2014, 7:55pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/4 "2014-02-14T19:55:37Z")

</div>

@mhartington Couldn’t you just do this:

```auto
<side-menu side="left" ng-controller="LeftMenuCtrl">
  <list>
    <item ng-repeat="item in items" 
             ng-class="{active: isItemActive(item)}"
             ng-href="{{item.href}}">
      {{item.name}}
    </item>
  </list>
</side-menu>

```

```auto
app.controller('LeftMenuCtrl', function($scope, $location) {
  $scope.isItemActive = function(item) {
    return $location.path().indexOf(item.href) > -1;
  };
});

```

This is just an example where each list item goes to a certain href - you could use this pattern for almost anything though 🙂

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [February 14, 2014, 7:58pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/5 "2014-02-14T19:58:18Z")

</div>

Nice Andy. I’m so glad you joined the Drifty team. It was great before but with another great mind in the mix (and more manpower), Ionic is really going to take off.

---

<div class="post-metadata">

**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\
**Post date:** [February 14, 2014, 8:08pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/6 "2014-02-14T20:08:41Z")

</div>

Thanks @Calendee! I’m loving it so far - and the community is awesome too!

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 3, 2014, 9:14pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/7 "2014-03-03T21:14:21Z")

</div>

@andy, sorry for no responding right away, had a few other things that required my attention before this. I went to implement this but where I’m running into trouble is with the href attribute. In you’re example, your href is defined somewhere in the model.

But in my case, I’m making my href by passing in other attribute in the model.

```
ng-href="#/master/{{item.name}}/{{item.detail}}

```

---

<div class="post-metadata">

**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\
**Post date:** [March 4, 2014, 7:05pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/8 "2014-03-04T19:05:45Z")

</div>

@mharington that should work fine.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 5, 2014, 8:36pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/9 "2014-03-05T20:36:33Z")

</div>

So I guess it was much simpler that I thought. I changed my links to use UI-Routers `ui-sref` instead of just `ng-href`. This lets you watch for which link is clicked based out the states the parameters you pass to it.

```
 <div class="list" ng-controller="IndexCtrl">

	<a ui-sref="main.detail({petsId: pet.id })"
            ui-sref-active="active" 
            ng-repeat="pet in pets" 
            class="item button-clear" >

		<p>{{pet.title}}</p>

	</a>

</div>

```

`ui-sref-active` lets you apply any class to a link as long as you are using `ui-sref`.

---

<div class="post-metadata">

**Author:** ![Vladimir](https://avatars.discourse-cdn.com/v4/letter/v/94ad74/32.png) [@Vladimir](https://forum.ionicframework.com/u/Vladimir)\
**Post date:** [March 27, 2014, 11:04am UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/10 "2014-03-27T11:04:38Z")

</div>

I use `ui-sref-active` in `ion-side-menus`. When page loaded current item has active class, but when i select other item active class dissapears.

```
 <ion-content class="has-header">
  <ul class="list">
    <a ui-sref="main.filters" ui-sref-active="active" class="item">Filters1</a>
    <a ui-sref="main.filters2" ui-sref-active="active" class="item">Filters2</a>
  </ul>
</ion-content>

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [March 27, 2014, 12:28pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/11 "2014-03-27T12:28:02Z")

</div>

I’ve been getting this too. I opened an issue for it so please feel free to add to it.

> <https://github.com/ionic-team/ionic/issues/913>
>
> I have a side menu navigation setup and use UI-routers built in method for handing active links.
> \<a ng-repeat="pet in pets" class="item"...

---

<div class="post-metadata">

**Author:** ![Vladimir](https://avatars.discourse-cdn.com/v4/letter/v/94ad74/32.png) [@Vladimir](https://forum.ionicframework.com/u/Vladimir)\
**Post date:** [March 27, 2014, 2:13pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/12 "2014-03-27T14:13:36Z")

</div>

To get around this issue i created my own class `current`. By checking the code, I found that `active` class is getting added to active elements and then its getting removed. Why they don’t use pseudo-class active?

---

<div class="post-metadata">

**Author:** ![andy](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andy/32/64157_2.png) [@andy](https://forum.ionicframework.com/u/andy)\
**Post date:** [March 27, 2014, 3:07pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/13 "2014-03-27T15:07:46Z")

</div>

We’re working on this.

---

<div class="post-metadata">

**Author:** ![fathermonkey](https://avatars.discourse-cdn.com/v4/letter/f/f14d63/32.png) [@fathermonkey](https://forum.ionicframework.com/u/fathermonkey)\
**Post date:** [September 14, 2015, 3:12pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/14 "2015-09-14T15:12:28Z")

</div>

I see the ui-sref-active working ok but if you use an ion-item the background with a darken 10% is not applied because the link inside has a background too, set to the specific color.

```
 <ion-list >
     <ion-item menu-close class="item-positive"
                      ng-repeat="item in vm.menuItems"
                      ui-sref-active="active"
                      ui-sref="{{ item.state }}">
                {{ item.title }}
         <div class="item-icon-right">
             <i class="icon ion-ios-arrow-right"></i>
         </div>
     </ion-item>
 </ion-list>

```

To solve this I overwrote:

```
.item.active {
    &.item-positive > a {
        @include item-active-style($item-positive-active-bg, $item-positive-active-border);
   }   
}
```

---

<div class="post-metadata">

**Author:** ![chetan1oct93](https://avatars.discourse-cdn.com/v4/letter/c/9d8465/32.png) [@chetan1oct93](https://forum.ionicframework.com/u/chetan1oct93)\
**Post date:** [July 30, 2016, 7:33pm UTC](https://forum.ionicframework.com/t/active-list-items-from-a-side-menu/1104/15 "2016-07-30T19:33:39Z")

</div>

Thanks Andy for sharing