# Setting Active links with UI-Router

**URL:** <https://forum.ionicframework.com/t/setting-active-links-with-ui-router/618>\
**Category:** ionic-v1\
**Created:** [January 22, 2014, 2:59pm UTC](https://forum.ionicframework.com/t/setting-active-links-with-ui-router/618 "2014-01-22T14:59:22Z")\
**Posts on this page:** 6\
**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:** [January 22, 2014, 2:59pm UTC](https://forum.ionicframework.com/t/setting-active-links-with-ui-router/618/1 "2014-01-22T14:59:22Z")

</div>

I know with ng-route, it was possible to set an active link based on the url but I’m not sure how this would work since the change to UI-Router.

So if I was on a page about “Cats” and I had a slide out menu, how would I highlight the Cats Item to show it was active.

[Heres a plunker](http://plnkr.co/edit/WnOmUJWcMqk9m9Z2jdwX?p=preview)

---

<div class="post-metadata">

**Author:** ![mattg](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@mattg](https://forum.ionicframework.com/u/mattg)\
**Post date:** [April 9, 2014, 9:14pm UTC](https://forum.ionicframework.com/t/setting-active-links-with-ui-router/618/2 "2014-04-09T21:14:16Z")

</div>

Did you ever come up with a solution for this?

---

<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:** [April 9, 2014, 9:19pm UTC](https://forum.ionicframework.com/t/setting-active-links-with-ui-router/618/3 "2014-04-09T21:19:53Z")

</div>

Ui-router has an active link tracker built into to it. For any links, I just add `ui-active="activeClassName"`

Then in my css

```
.activeClassName{
   /*Some style to reflect an active link*/

}

```

---

<div class="post-metadata">

**Author:** ![mrtnbroder](https://avatars.discourse-cdn.com/v4/letter/m/977dab/32.png) [@mrtnbroder](https://forum.ionicframework.com/u/mrtnbroder)\
**Post date:** [April 9, 2014, 9:43pm UTC](https://forum.ionicframework.com/t/setting-active-links-with-ui-router/618/4 "2014-04-09T21:43:36Z")

</div>

it is `ui-sref-active="ClassName"`  
see [https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref-active](https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref-active)

---

<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:** [April 10, 2014, 12:39am UTC](https://forum.ionicframework.com/t/setting-active-links-with-ui-router/618/5 "2014-04-10T00:39:42Z")

</div>

Yup that’s it, I was typing it from memory, ha! A little off

---

<div class="post-metadata">

**Author:** ![rwin90](https://avatars.discourse-cdn.com/v4/letter/r/3da27b/32.png) [@rwin90](https://forum.ionicframework.com/u/rwin90)\
**Post date:** [February 11, 2017, 1:13pm UTC](https://forum.ionicframework.com/t/setting-active-links-with-ui-router/618/6 "2017-02-11T13:13:28Z")

</div>

ui-sref-active work fine in web view but it doesn’t work in mobile!!!