# Making "Active Link" Standout with SPA Change **URL:** \ **Category:** Ask us anything\ **Created:** [July 13, 2022, 2:08pm UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777 "2022-07-13T14:08:22Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\ **Post date:** [July 13, 2022, 2:08pm UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/1 "2022-07-13T14:08:22Z")
I am excited about the new changes that will improve UX with the move to SPAs. However, I can’t figure out how I could use a linked instance for my nav bars while still indicating which page you are now on. What am I missing? ---
**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\ **Post date:** [July 13, 2022, 3:04pm UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/2 "2022-07-13T15:04:25Z")
Are you referring to the “Active link” state of the links and the ability to change the style with it? I noticed a strange behaviour as well: the “Active Link” style are applied only on the first preview of the page. After the first navigation the style is not applied anymore. As a workaround I am binding the values that I want to change to a formula that compares the current page id with the page id of the target page of the link. ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/5c7a0cdc7f390332b706e7b2b21b9474e8596ba7.png) ---
**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\ **Post date:** [July 13, 2022, 4:10pm UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/3 "2022-07-13T16:10:53Z")
that’s an interesting approach, though it seems more complicated than it ought to be. My approach has been less sophisticated; I have just been copying the nav bars rather than creating instances, and then manually changing the color on each page. Obviously, this is a bulky and inelegant approach, so I’d love to do it the right way! ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [July 13, 2022, 5:08pm UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/4 "2022-07-13T17:08:59Z")
I’m doing the same as @dorilama 🙂 The team is working on improve states so we can use Active Link instead in the future. ---
**Author:** ![kevinwasie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kevinwasie/32/402_2.png) [@kevinwasie](https://community.weweb.io/u/kevinwasie)\ **Post date:** [July 13, 2022, 5:56pm UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/5 "2022-07-13T17:56:36Z")
Ahhh! I’ve been trying to figure out the pattern of when they are showing up different! What a gift @dorilama: the “Active Link” style are applied only on the first preview of the page. After the first navigation the style is not applied anymore. ---
**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\ **Post date:** [August 6, 2022, 8:13pm UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/6 "2022-08-06T20:13:57Z")
Hey @Joyce, do you have any updates on this? I’m trying to decide if I’ll need to copy @dorilama 's approach or if a simpler no code solution will be shipping soon. Thanks! ---
**Author:** ![kyanaloe](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kyanaloe/32/1076_2.png) [@kyanaloe](https://community.weweb.io/u/kyanaloe)\ **Post date:** [September 20, 2022, 3:32am UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/7 "2022-09-20T03:32:42Z")
Is there a way to alter the font-weight using this approach? ---
**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\ **Post date:** [September 20, 2022, 7:18am UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/8 "2022-09-20T07:18:55Z")
font weight is not bindable, you need to add custom global css and bind the class of the text. ---
**Author:** ![hsatl](https://avatars.discourse-cdn.com/v4/letter/h/67e7ee/32.png) [@hsatl](https://community.weweb.io/u/hsatl)\ **Post date:** [September 29, 2022, 3:14pm UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/9 "2022-09-29T15:14:21Z")
Same here. @Joyce any updates on “active link” state? ---
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [September 29, 2022, 5:48pm UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/10 "2022-09-29T17:48:52Z")
It’s currently under review so hopefully out soon but I don’t have a firm date ---
**Author:** ![hsatl](https://avatars.discourse-cdn.com/v4/letter/h/67e7ee/32.png) [@hsatl](https://community.weweb.io/u/hsatl)\ **Post date:** [September 29, 2022, 6:19pm UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/11 "2022-09-29T18:19:14Z")
Thanks ---
**Author:** ![elyseholladay](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/elyseholladay/32/3921_2.png) [@elyseholladay](https://community.weweb.io/u/elyseholladay)\ **Post date:** [July 25, 2023, 6:15pm UTC](https://community.weweb.io/t/making-active-link-standout-with-spa-change/777/12 "2023-07-25T18:15:23Z")
for anyone else finding this thread — you can now add an active state to the items, and for the condition, check the current page path. you still have to do this for each link, but it works ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8e305fe6b7791ad209902b8a1fc47c8928e09b66.png)