How can I set an active/current state for link blocks in Webflow when clicked on? I want to design a website similar to one I found, where the list state changes on scroll. Can someone assist me with this? Thank you.

To set an active/current state for link blocks in Webflow and change list states on scroll, you need to combine Webflow's Current state styling with interactions or scroll-based logic. Here’s how you can do both:

1. Use Webflow's “Current” State for Navigation Links

• Link Blocks pointing to internal pages or section IDs (#section-id) will automatically receive a special “Current” class when that page or section is active.
• To style the Current state, select a Link Block that is already pointing to the current section, then create styles for its “Current” state in the Style Panel (you’ll see a small green label saying “Current”).

Important Notes:

• This only works if links are directed to a valid section on the same page, like #about.
• For external URLs or dynamic highlighting, this won't apply—you’ll need scroll-based interactions.

2. Create Scroll-Based Active States with Interactions

To replicate list state changes while scrolling (like highlighting links based on scroll position):

• Use Section-based Page Structure: Create clear sections with unique IDs (section-about, section-services, etc.)
• Link Blocks Should Navigate via Anchor Links: e.g. #section-about
• Add Page Trigger: Scroll into View
• Go to Interactions (⚡️) → Page Trigger → While Page is Scrolling
• Choose Scroll Progress or Scroll into View (depending on need)
• For each section, create a Scroll Interaction that:
  • Adds a class (e.g., is-active) to the matching navigation link
  • Removes the class from all others

Manual Class Management Required:
Webflow doesn’t auto-remove an active class from other items. Use the interaction settings to:

• Remove is-active from sibling elements
• Target the correct nav link for each section

3. Optional: Use Custom Code for Dynamic Scroll-based Active States

If you want smoother control (especially for complex interactions or dynamic elements), you can:

• Add custom JavaScript using scroll event listeners and IntersectionObserver.
• Dynamically apply .is-active class based on what section is in the viewport.

Note: This approach is more flexible but requires JavaScript knowledge and won’t preview inside the Webflow Designer; test it on the published site only.

Summary

To set an active/current state for link blocks, use Webflow’s native Current class styling for page or anchor links. For more dynamic scroll-based highlights, use scroll interactions or custom code to add/remove active classes as users scroll through sections.