Manually add Current State class to Links

.

Learn how to set a link to be shown with the current state applied on pages that are not the original destination.

This can be useful if you have a link to your Blog page but you also wants the same link to appear with the current state applied at the Posts page as well.

At project settings of your Webflow project, go to the Custom Code tab and paste the code bellow under Before </body> tag:

<script>
// Waits webflow and then adds the w--current class to the attributes links
var Webflow = Webflow || [];
Webflow.push(function () {
  // Get all elements that has the "attr-link" attribute
   const attrLinks = document.querySelectorAll('[attr-link]');
   // Checks every element that has the attribute
   attrLinks.forEach((link) => {
       // Gets the value of the attribute
       const linkValue = link.getAttribute('attr-link');
       // Check if the values exists on the url
       if (window.location.href.includes(linkValue)) {
           // If it exists add the w--current class to the link
           $(link).addClass("w--current");
       }
   });
});
</script>

Now select the link that you want to add this function and under element settings create a new attribute with the name of attr-link. The value must be the rest of the url that you also want the link to be shown with the current state applied. Continuing the Blog example, the value must be /posts/ to apply the current state of the link to allyour posts.

Another example

I have a navbar link that links to the resources page "solomid.tech/resources" but I also want the resources link to appear with the current state when I access the resources template page that has the collection url equal to "solomid.tech/resources/".

So I should select the resources link and add the attribute attr-link with the value of /resources/.

Now when I visit any resources template page my link that originally links to the resources page appears with the current state applied as well.

Remember to publish your site to see it in action.

Tags
Custom Code
Utility
Webflow
Client First
Link to Webflow Professional Partner page.