Recreate the menu like on Habitat website

Hi everyone,

I was wondering if anyone knows the ways to create the menus that look and work like the ones below?

In essence I would like to replicate HABITAT’s menu - link here:








Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Your read-only link isn’t working to see where you’re up to with this.

But it would basically be a case of several off-screen menus, clicking the dropdown at the top triggers the first level menu to open, and clicking any element within that menu causes the second level menu to pop up, and on mobile you’d probably just move it off-screen to the left.

It’s fairly complex in terms of layout but certainly do-able, I’d suggest JS to do this over interactions, just due to how the interactions handle multiple clicks being somewhat limited.

Hi Matt,

Thank you for your reply. The preview link didn’t work because I didn’t attach a development site to it.
I see, so it looks like this is quite a complex task, requiring advanced JS knowledge. Am I right?
I was hoping to find a way of achieving this using built-in webflow features and functionality.

Hi Eugene, no problem at all.

It’s doable with the in-built interactions, but it would be difficult to make, and probably quite buggy as there’s no native way in Webflow to add or check classes on an item or target child / parent elements either.

I can’t think of any way to do it with interactions that wouldn’t require a specific interaction for every individual item.