How to style the current nav link in Webflow?

Highlighting the active page in your navigation helps users understand where they are on your site. Webflow provides a built-in current state for nav links that makes this easy.

Using the Current State

Webflow's Navbar component automatically assigns a special class to the link that corresponds to the current page. To style it:

1. Select a nav link in the Designer
2. In the Selector dropdown at the top of the Style panel, look for the Current state — it appears as an additional state option on link elements within a navbar
3. Style it however you want — different color, underline, bold weight, background, or any combination

The current state is separate from hover and pressed states. It only applies to the nav link whose href matches the page the visitor is currently viewing.

Styling Approach

A common pattern is to give the current link a distinct text color or bottom border. For example, set all nav links to a neutral color, then apply a brand color or underline to the current state. Keep it subtle enough that the navigation stays clean, but obvious enough that users immediately see their location.

Limitations

The current state only works on native Navbar components and standard link elements. If you built your navigation using generic div blocks and text links outside of a Navbar component, you'll need custom code to detect and highlight the active page. A common workaround is to use Webflow's per-page body class and write CSS rules that target the appropriate link for each page.

Custom Code Alternative

If you need active states outside of the native Navbar, add this script to your site's footer code:

<script>
  const links = document.querySelectorAll('.nav-link');
  const current = window.location.pathname;
  links.forEach(link => {
    if (link.getAttribute('href') === current) {
      link.classList.add('w--current');
    }
  });
</script>

Then style the .w--current class in your stylesheet or Webflow's custom CSS.

Whether you use the built-in current state or a custom approach, active nav styling is a small detail that significantly improves wayfinding on multi-page sites.