Is it possible to highlight the link to the current page in the Navbar/Menu in Webflow?
TL;DR
- Use Webflow’s built-in “Current” class state to automatically highlight the active page link when it matches the current page URL.
- Style the "Current" state individually on each page, ensure nav links point to internal pages, avoid symbol overrides, and use workarounds for CMS pages if needed.
Yes, you can automatically highlight the current page link in a Webflow navbar using built-in functionality.
1. Use Webflow’s "Current" Class State
- When a Link Block or Nav Link in a Navbar points to the current page, Webflow automatically applies a “Current” state to that link.
- The “Current” class allows you to visually indicate which page the user is on.
2. Style the “Current” State
- Click the nav link corresponding to the page you're editing.
- In the Selector menu, you’ll see
Class Name (Current)appear if the link matches the current page. - Style this state (e.g., color, underline, background) to visually differentiate it from other links.
3. Repeat for Each Page
- You need to apply and style the "Current" state separately on each page because Webflow shows the "Current" state only when editing that specific page.
- Make sure the navigation links are pointing to the correct internal pages, not external URLs, or the "Current" class won’t apply.
4. Avoid Symbol Overrides
- If your Navbar is a Symbol, make sure links within it are not overridden on individual pages, or Webflow won’t recognize the link correctly and won’t apply the “Current” state.
5. For Collection Pages
- For CMS-generated pages (like blog posts), the “Current” state isn't automatically applied to regular links.
- Instead, link to the Collection Page itself (e.g., Blog Overview) and style that link with conditional visibility or custom code if deeper highlighting is required.
Summary
To highlight the active page link in Webflow, rely on the built-in “Current” class state, style it on each page, and ensure links point to internal pages without overrides.