Is it possible to highlight the link to the current page in the Navbar/Menu in Webflow?
TL;DR
- Webflow adds a "Current" class to nav links that match the current page's URL.
- Style the "Current" class in the Designer by selecting the nav link while on its corresponding page.
Yes, Webflow automatically highlights the nav link for the current page by applying a special class to it. Here's how it works and how to customize it.
1. Understand the Current Page Class
- When you're on a page that matches a Navbar Link's Href, Webflow automatically adds a class called “Current” to that link.
- This only applies if the link exactly matches the current page's URL (e.g., linking to
/aboutfrom the "About" page).
2. Style the "Current" Class
- Select your Navbar link while viewing the actual page it links to (e.g., go to the "About" page to edit the "About" link).
- In the Style panel, you’ll see that Webflow adds and highlights a class named Current.
- Apply your desired styles (e.g., text color, underline, bold) while the "Current" class is active.
3. Differences with External or Section Links
- The “Current” class only works with internal links (i.e., linking to pages in your project).
- If you're using section links (e.g.,
#services), the Current class applies when that section is in view only if the Nav link uses a Section ID from the current page.
4. Test Across Pages
- To verify, preview your site in Designer or publish it, then click through your site to confirm the "Current" styles appear on the active page’s Nav link.
Summary
Webflow automatically adds a "Current" class to Navbar links that point to the page you're on. You can style this class to visually highlight the active nav item directly in the Designer by editing the link on that specific page.
