How to Build Dropdown Menus in Figma

Learn different ways to build dropdown menus in Figma, including a simple trick (04:46) that will prevent menus from disappearing in prototypes.

Table of Contents:
00:29 Demo 1: Button Component with Dropdown
01:10 Demo 2: Two Buttons as Button Components
01:44 Demo 3: Overlay that Disappears
02:52 Demo 4: Overlay that Works (Transparent trick)
03:37 Build: Button Component with Dropdown
04:01 Build: Two Buttons as Button Components
04:23 Build: Overlay that Disappears
04:46 Build: Overlay that Works (Transparent trick)

How to Reflow Text Across Columns in Figma. It's Magic!

How to Edit the Figma Business Card Template

How to Create Textures in Figma

Hidden Gem: Figjam Section Graphs

How to Upgrade Figma to Organization Plan

Figma Double Click Layer Zoom

How to Copy Text from an Image for a Faster Figma Workflow

How to Build Dropdown Menus in Figma

How to Quickly Add or Update Figma Component Set Variants and Properties

Try Figma's Quick Actions for Blazing Fast Vector Art

How to Automate Figma Cover & Default Page Creation

How to Get Perfect Figma Gradient Angles #Shorts

Improve Your Figma Comments #shorts

How to Make Your Figma Comments Land #shorts

[sonvi]

Do you have a tutorial showing how to add that transparency at the top please?

[ammark]

Great idea, I was having trouble with this as well & now it works effortlessly. Way to come up with a solution like this Jono.

[tweet-tube]

Excellent idea to add a transparent/see-thru space above the menu (~ 04:50).

[holbak]

The problem with this is that you no longer have the option to trigger the animation on your button where the arrow turns 180°. You could have the button in 3 stages: Default, hover and selected and have the onClick event on the hover button while the selected button opening up the overlay after 1ms delay, but then when you close the overlay you can't target the hover state of the button and is now stuck with the selected state. I wish they would add a navigate to when closing feature. I hope it makes sense 🙂

[hatdogberonio]

Thanks a lot! 👍 Exactly what im looking for

[nikyabodigital]

The overlay doesn't close even if I leave the mouse pointer already

[Sara-jggr]

Hello everyone, i have a problem i don’t know how to solve. I have a desktop frame (i think it is called prototype frame) in which i am putting all the components to create the home page of my website. For every section of the page i have created a frame. However, when i link the elements of my navigation bar to the sections of the page (i drag the arrow to the component and i put “on click” → Navigate to (the section of the page) and after that i put the linked section inside the main frame, nothing works both in the presentation and preview mode. Do you have any suggestion? Is it a Figma’s problem or did i do something wrong?😓😓

[sirbirre]

Bro I'm in touble, I don't how to proceed once you selected any options from a dropdown icon. ¡Help! 😭😭😭😭

[jdeso]

Instead of using a hover use mouse enter try that.

[Aquarellina]

this is amazing to begin with but feel like the tutorial wasn't complete or maybe my knowledge is too poor for this level

[nikyabo]

If you guys have tried it and it's still doesn't work remember that you use "MOUSE ENTER" not while hovering :).