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 pointing to the active page, allowing unique styling in the Designer.
- This works with native Nav Link elements linked to internal pages, but not with external URLs or custom links.
Yes, Webflow automatically adds a "Current" class to any navigation link that points to the currently loaded page, allowing you to style it differently.
1. Use Webflow’s Built-in “Current” State
- When a Nav Link component is linked to a specific page and that page is open in the Designer, Webflow automatically shows a green “Current” label next to the nav link class name in the Style panel.
- You can customize the style of this state (e.g., color, underline, bold) just like any other class, and it will apply only when the link points to the active page.
2. Style the “Current” Class
- Select the nav link that shows the “Current” label while on the active page.
- Make your style adjustments (e.g., change text color, add a border, or change font weight).
- These changes will apply only to the Current version of the link, not globally.
3. Important Notes
- This works only with Webflow’s native Nav Link elements connected to internal pages (i.e., pages from your site).
- If you're using external URLs or custom link blocks, the “Current” class will not be applied automatically.
- For one-page sites using section links (like
#about), the “Current” class applies briefly as the user scrolls to that section, but this can fade as they scroll past.
Summary
Webflow highlights the link to the current page by adding a "Current" class to nav links that match the page URL. You can style this state directly in the Designer to visually distinguish the active page in your navigation.