Making "Active Link" Standout with SPA Change

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?

1 Like

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

1 Like

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!

1 Like

I’m doing the same as @dorilama :slight_smile:

The team is working on improve states so we can use Active Link instead in the future.

3 Likes

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.

1 Like

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!

Is there a way to alter the font-weight using this approach?

font weight is not bindable, you need to add custom global css and bind the class of the text.

Same here. @Joyce any updates on “active link” state?

It’s currently under review so hopefully out soon but I don’t have a firm date

Thanks

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

3 Likes