#88 - Show Current State For CMS, Folder Links v0.1

Display the Webflow "current" state on your nested pages & CMS items.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #88 v0.1 💙 SHOW CURRENT STATE FOR NESTED URLS -->
<script>
window.onload = function() {
  var currentUrl = window.location.href;
  var elements = document.querySelectorAll('[ms-code-nested-link]'); // get all elements with ms-code-nested-link attribute

  elements.forEach(function (element) {
    var linkAttrValue = element.getAttribute('ms-code-nested-link'); // get the ms-code-nested-link value
    if (currentUrl.includes(linkAttrValue)) { // check if current url matches the attribute value
      element.classList.add('w--current'); // apply the class 
    }
  });
};
</script>

Description

Attribute

No items found.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Set a Link to its Current State when on a Folder Page (Webflow)

Memberscripts needed

https://www.memberstack.com/scripts/88-show-current-state-for-cms-folder-links

Tutorial

Cloneable

Why/When would need to Set a Link to its Current State when on a Folder Page?

Highlight navigation links even when you’re on nested pages below them.

This guide will help you set links in the navigation menu to their “current” state even when you’re on nested pages below them.

For example, if a visitor is on /blog/post, and your Blog link in the nav menu is going to /blog, you’ll make it so that the Blog link still has the “current” state applied.

Setting a link to its “current” state on Webflow

To set a link to its “current” state on your Webflow site, we’re going to use MemberScript #88 – Show Current State for CMS, Folder Links. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

All you need to do is go to your navigation menu, select the links you want to have a “current” state even when on nested pages below them, and add the following attribute to them:

ms-code-nested-link=”/SLUG/”

Just replace “SLUG” with the slug from the root page. For example, if visitors are on an individual blog post with a URL that looks like URL.com/blog/post and you want the Blog navigation link to be highlighted, just put in “/blog/” as the attribute’s value.

That will make it so whenever visitors are on a nested page below /blog/, the Blog nav link will always be set to its “current” state.

Making it work

Now that you’ve got everything set up, all you need to do is add the MemberScript #88 custom code to your site by going to your site’s settings in the Webflow dashboard and pasting it in the head section under the Custom code tab.

Conclusion

That’s all there is to it, you can now go ahead and test the navigation links on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you easily display the Webflow “current” state on links even when you’re on nested pages below them.

Take me to the Scripts

Read full documentation

Button Text

Something not working as expected?

#88 - Show Current State For CMS, Folder Links v0.1

Need help with this MemberScript?

Creating the Make.com Scenario

How to Set a Link to its Current State when on a Folder Page (Webflow)

Memberscripts needed

Tutorial

Cloneable

Why/When would need to Set a Link to its Current State when on a Folder Page?

Setting a link to its “current” state on Webflow

Setting it up

Making it work

Conclusion

Take me to the Scripts

Try Memberstack for free

Product

Language

Customers

Company

Resources