How to Use the Chattermark Navigation Activator in Webflow

This script automatically highlights the active dropdown title when one of its links matches the current page URL. This helps users easily identify their current location in the menu.

1. Add the Script to Your Webflow Project

Go to the Webflow Site Setting and click on the tab Custom Code. Include the following script in the <head> section or before the closing </body> tag:

<script src="https://ctmk-active-menu.vercel.app/active-menu.js" defer></script>

Or use the minified version:

<script src="https://ctmk-active-menu.vercel.app/active-menu-minify.js" defer></script>

2. Setting Up the Dropdown

Navigation Structure

To set up the menu, add a Dropdown element inside your navigation. Click on the Dropdown, go to Webflow settings, and add the attribute ctmk-menu.

ctmk-menu

Styling the Active State

Inside the Dropdown, locate the Dropdown Toggle, which represents the title element, and assign it a new class called ctmk-active. Style this class as needed to highlight the active state.

ctmk-active

Once styled, remove the ctmk-active class from the class list. The script will automatically apply it on page load, when needed.

3. Setting Up the Dropdown List

Adding Links Inside the Dropdown List

Inside the Dropdown List, use either Text Link or a Link Block. Add the attribute ctmk-child to each link.

ctmk-child

Alternative: Using Tabs Instead of Links

If you're using Webflows Tabs element instead of a Text Link or Link Block, assign the ctmk-tab-link attribute to define the target URL. The script will navigate to the specified URL when clicked. Additionally, use the ctmk-child attribute just like with regular links from the chapter before to ensure correct highlighting.

ctmk-tab-link

Now, when a user clicks a tab or a link inside the dropdown, the script will highlight the corresponding dropdown title.