To style the active page link in your Webflow Navbar without relying on the built-in "Current" state, you’ll need to use a combination of custom attributes and custom code.
data-page="about").home, about, contact to match the page slug.<head> or Before </body><script> to detect the current pathname and match it with data-page values.Example inline script (added before </body> tag):
<script> document.addEventListener("DOMContentLoaded", function() { const path = window.location.pathname.replace("/", "").toLowerCase(); // get current slug const activeLink = document.querySelector(`a[data-page="${path}"]`); if (activeLink) { activeLink.classList.add("active-link"); } });</script>pathname may return an empty string ("").data-page="home" to the Home link.const path = window.location.pathname.replace("/", "").toLowerCase() || "home";To style active navbar links without using Webflow’s "Current" state, add a unique data-page attribute to each link, then use a small JavaScript snippet to add a custom class to the link matching the current page slug. Style the active-link class in Webflow to achieve the visual effect like an underline or color change.