Streaming live at 10am (PST)

How do you create "anchor tabs" like the Webflow vs. Shopify webpage?


#1

Hi all,

I would like to know how we can create “anchor tabs”, tabs that anchor to sections on a page and change state depending on the section in view. The Webflow vs Shopify webpage is a perfect example.


#2

What you call the anchor tab is just a list of links. So, it’s a menu.

Each link of the menu, targets a section ID (Give an ID to the section and use it when defining the link target).

The blue line is the Current state: when a link reference a page you’re in, or a section that is in view, you’ll notice that there is an extra combo class, a green one, called Current. Style you blue border for this state, and it will be applied to a link only when it’s active.


#3

This article may help :slight_smile:


#4

First of all, let me start by saying that this was my first post to the Webflow forum and I got 2 responses within 5 minutes; that is incredible, I am truly delighted. Thank you @vincent and @PixelGeek for the responses, you guys have solved my question! :star_struck: