How to highlight the active section in a one-page navigation menu on Webflow

Introduction

When browsing a one-page website, it's sometimes important to be able to easily locate the active section from the navigation.

In today's article, we're going to show you how to dynamically highlight the active section in the Webflow navigation . Whether in the navigation menu or in a secondary menu (such as a long FAQ with several categories), this technique can be very useful for improving your users' experience on your website!

So today we're going to find out how to add a distinctive visual effect to the active navigation element, making it easier for your users to find their way around your website. There's a little trick to achieving this functionality!

1. How to structure your page correctly

To highlight the active section in our Webflow navigation menu, we first need to understand the typical structure of this type of configuration.

In a one-page layout, content is divided into distinct sections. The navigation then uses anchor links to connect the navigation menu items to the different sections. By using anchor links, you can create a navigation menu that links to each specific section of your page.

Preliminary steps :

• ‍Createyour design as you see fit with your content, sections and navigation.
• Once you've created your basic structure, add an ID to each of your sections from Element Settings.

• Once the ID has been added, link each menu item to the corresponding section using the Link Options Page Section option.

Your structure is ready!

In the next section, we'll discover how to unlock the "Current" state to highlight the active section in Webflow navigation.

2. How to unlock "Current" status customization

The "Current" state is a special state in Webflow that can be used to style an element when it is currently displayed on the screen. In short, by applying this state to the navigation element corresponding to the active section, you can style it differently from other elements.

But there's a little trick you need to know: by default, Webflow automatically applies the "Current" status to a link when it points to the page you're on. In our case, as we're using anchor links that point to sections, this state is not available by default.

Fortunately, there's a simple trick you can use to get around this limitation and obtain "Current" status on your anchor links:

The trick to unlocking the "Current" state

Simply select the target section (the one to which you've added an ID) in the Designer, then return to the anchor link of which it is the target. The "Current" status should then be available in the element's Style Panel.

The emergency tip

In some cases, this solution may not work: a slightly more time-consuming but guaranteed solution is to change one of the anchor links to a link to the current page, customize the "Current" status of this link, then change it back to an anchor link afterwards.

3. Customize style

Now that you've unlocked the customization of the "Current" state for your anchor links, you can customize the style of this state to highlight the active section in your menu.

Here are a few tips to help you customize your style:

1. Color: Choose a color that stands out. You can use a different color for the link text, for its background, or even for both. Just make sure the color you choose is consistent with the rest of your design.
2. Underline or border: Add an underline or border to the element to make it more visible when the section is active.
3. Transition effects: You can also create transition effects from the "Effects" tab of the style panel to make highlighting more fluid and enjoyable for users. Transitions can include opacity, color or displacement animations.

Feel free to experiment with different combinations of styles to find the one that best suits your design and visual identity.

4. Use on other menus

Highlighting the active section in menus is not limited to a single one-page navigation. This technique can also be applied to other types of menus, such as a list of categories in a long FAQ, for example.

The procedure for implementing this functionality on other menus is similar to that explained for one-page navigation. You'll simply need to adapt the structure and interactions to your specific needs.

Conclusion

Highlighting the active section in the navigation can be an important element in improving the user experience and facilitating navigation on your Webflow site. By using the "Current" status on anchor links, you can give users a clear visual indication of their position on the page.

We hope you found this tutorial useful!

Want to learn more web design tips like this one?

• Follow us on our YouTube channel for more guides and tips,
• Keep learning, experimenting and innovating with Digidop Académie,
• Check out the latest blog post: How to create a border gradient on Webflow.