Skip to main content

Active Nav Highlight

Webflow applies w--current automatically to Nav Link elements that match the current page — but only if they use Webflow's native Nav Link component. Custom-built navigation (Div Blocks, Link Blocks, plain <a> tags) never receives this class, leaving you with no way to style the active item via the Designer.

This snippet reads the current URL pathname and adds w--current to any matching nav link at runtime.

Page Settings script​

Add to Page Settings → Custom Code → Before </body> (or Site Settings if the nav is global):

<script>
(function () {
  var path = window.location.pathname.replace(/\/$/, '') || '/';
  document.querySelectorAll('a.nav-link').forEach(function (link) {
    var href = (link.getAttribute('href') || '').replace(/\/$/, '') || '/';
    if (href === path) {
      link.classList.add('w--current');
    }
  });
})();
</script>

Setup​

StepAction
1Add the combo class nav-link to every navigation anchor in your custom nav.
2Add the script to Site Settings → Custom Code → Footer (before </body>).
3Style .w--current in the Designer as you would any Webflow current state.

Partial path matching​

For section-level highlighting (e.g. mark the "Blog" nav item as active on all /blog/* pages):

<script>
(function () {
  var path = window.location.pathname;
  document.querySelectorAll('a.nav-link').forEach(function (link) {
    var href = link.getAttribute('href') || '';
    if (href !== '/' && path.startsWith(href)) {
      link.classList.add('w--current');
    } else if (href === '/' && path === '/') {
      link.classList.add('w--current');
    }
  });
})();
</script>

This matches /blog/my-post to a nav link with href="/blog".

Notes​

  • The trailing-slash normalisation (replace(/\/$/, '')) handles Webflow's inconsistent trailing slash behaviour — some pages have it, some don't.
  • If your nav uses a different class name, swap a.nav-link for any valid CSS selector (e.g. a[data-nav], .nav_item a).
  • Runs after DOM load (inside </body>), so the class is applied before the first paint in most cases.