How to set Active state for link blocks

Design help Animations & Interactions
#1

Hello,

I am trying to figure out if it is possible to set an active/current state for link blocks when clicked on it. I am designing a website for my client.

I was trying to make a website similar to this: https://okrbot.io/guide-for-slack

Just wondering how the list state is getting changing on the scroll. Can anyone help me out??

Thank you.

#2

Those links are linking to an anchor in the page.

In Webflow, when the target of a link (i.e. a section with an anchor) is in view, the link or link block gets the Current green class in the selector box. That’s when you style it.

Live example http://vertical-nav-menu.webflow.io/
or http://yvette-horner.webflow.io/

#3

Thank you very much @vincent, I got your point that those are anchor links linking to sections of the page, I have used ID for linking sidebar link blocks to the sections, so that when clicked it takes us to the specific section.

However, It will be great if you could provide me with a demo link or video or read-only link of how you have done this http://vertical-nav-menu.webflow.io/ so that it will be much easier for me to understand.

Thank you.

#4

I figured out where I was doing wrong, I was linking to heading/h3 rather than the section/div. it’s working now. all I did is just gave IDs for all the div sections and linked the same with the anchor links/link blocks I had.

Now I can see the current state ( Green color) :grinning: Thanks for your help!

1 Like
#5

Thank you for mentioning this! I was having the same issue and this was the fix I needed.