Custom dropdown menu - Webflow interactions & animations tutorial

Learn how you can build a fully custom dropdown menu using Webflow's elements and interactions in four steps:

(1) 0:52 — creating a dropdown wrapper
(2) 1:25 — configuring the dropdown trigger
(3) 2:22 —adding the dropdown content
(4) 4:30 — building the dropdown interaction.

Check out these resources:
-------------------------------------------

----------

[pirovanomg]

Webflow seriously has the best tutorials I've ever seen.

[kujo]

Webflow tutorial from this man this the best there is. I watched all of them. Thank you for making it short, fun, and practical. 👍👏

[henson_prod]

This tutorial came from 5 years ago but I feel like it came from the future and this is more relevant than what's out there. Really good video.

[theimagebear-]

Webflow honestly has some of the best tutorials I've ever seen.

[ShutterlabCreative]

These tutorials are the reason I use Webflow. Thank you.

[nodiggity]

your tutorials are so easy to understand!

[tylerbonts]

"Then we'll use the option called editing..." lol, I could watch these tutorials for days.

[housechimp]

I like the humor in these tutorials :).

[grdovwd]

Thank you very much for this tutorial! I am a COMPLETE beginner ... still going through the "21 days portfolio" tutorial, and since i have watched the module on CSS, i keep improving the style of my page ... and today just came up with the idea of having a drop-down to reduce the reading content (and give more control to the viewer), tried on my own for 30 min or so ... kind of understood how it could be done ... but still far from finding the right way; but thanks to this tutorial i understood more on how Webflow works, and quickly got the result i wanted! Thank you again!

And for a total newbie, my website starts looking like something an amateur designer/programmer would have done :D

P.S.: that "21 days portfolio" tutorial is really helpful for beginners ... much better than 101 [which i didn't finish because it was overwhelming with all the information and jargon being given] if you are considering making other such types of tutorials, i highly encourage it!

[danielcobb]

Great - literally had a client ask me to make these for their site :)

[amitnaamani]

Wow. this took me an hour but I got it done - had to know you need to press every time the different between "trigger" and "content". phews

[justaprimate]

Just love the humour and fun he is having. Come to the UK and let's have a beer or three?

[MaudeSuperFishPower]

Would love to see an updated tutorial on custom drop down menus in our nav bar with the hover interaction! finding it difficult to create and control :(

[mauro.iannicelli]

If I implement this this custom dropdown using click (rather than hover), when I click the dropdown trigger the menu opens correctly. But how do I make it close when I click elsewhere on the page (instead of clicking a second time on the dropdown trigger)? Many thanks!

[jgodek]

What if we want this to sit in a navbar? So the menu drops down at the width it i snow but the nav trigger item is only 100px wide for example.

[davec]

Do you have a dropdown option on "hover" of the menu instead of trigger?

[shivamtrivedi]

can anyone please tell me how to make the content of menu drop horizontally instead of vertically?

[Webflow]

*Want to toggle the dropdown menu on hover instead of click?*

Use the same animations, only select the "dropdown wrapper" instead of the "dropdown trigger". Then, instead of choosing click (tab), choose element trigger: mouse hover. Then, follow the steps to create the animation.

[Vanni]

Very good video! The only problem I have is that when I want to close the dropdown, it closes the dropdown but as soon as it is closed, it immediately opens it again. That is, when I press the "dropdown trigger" again, it closes the "dropdown content", but then pops right back up. it seems like a bug. What can this be?

[jasinAmsterdam]

How do I keep the "options" open when I hover over them?