White Arrow icon
Back to all Elements

Current Class on Dropdown

Makes the dropdown element (usually inside navigations) indicate when a current state is active on one of the pages within.

What this code does is to check if there's a child element under the dropdown with current state ('.w--current' class added by webflow), and apply the same class to the parent dropdown element.

We start by adding this short code to the Project's custom code section, so this will work globally on any page in the project.. We can also add this manually to every page we have a sub level dropdown menu.

<script>

 $('.w-dropdown').each(function() {

   var hasActiveLink = $(this).find('.w--current').length > 0;

   $(this).find('.w-dropdown-toggle').addBack().toggleClass('w--current', hasActiveLink);

 });

</script>

Copy

Based on Samuel Liew code from here.

Preview:

browser mockup
Share:
Heart icon

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

Symbol in RichText

Cloneable
CMS
Code

Insert a symbol element into a RichText. On a static or dynamic page.

Read more
Blue arrow iconWhite Arrow icon

Pass Parameters

Cloneable
Code

Pass input fields parameters and add them to the destination URL.

Read more
Blue arrow iconWhite Arrow icon

Before / After effect

Cloneable
Tricks
Interactions

A Before / After effect for photos, without any code. Only Webflow's interaction.

Read more
Blue arrow iconWhite Arrow icon