WEB DESIGN IN FIGMA ep.11: Dropdown Menu Navigation – Free UX / UI Course

In the eleventh episode of “Designing a Website in Figma”, we’re going to create a functional dropdown menu navigation prototype that will enable us to go through individual pages. Expanding on the last episode where we created a global navigation prototype, we’re going to take it one step further in terms of complexity and create a functional drop down menu navigation in our website prototype.

How to create a functional dropdown menu for your website with hover states in figma – Figma Prototyping Tutorial – Free UX / UI Course in Figma – great for beginners

————————
© 2023 Mavi Design

[jesspearache]

Thanks for the Web Design in Figma series. I have been looking for real, hand-ons tutorials on Figma, and this is just what I needed... Great!

[Dobeedoagency]

You're a great teacher. The way you're able to explain things in detail to help your viewers understand not only how to do something but how it works is a skill that very few educational channels have.

[saljugmahmudlu]

*Your channel is underrated*
They're really helpful contents. Not usual stereotype contents. I love it. Keep it up!

[mavidesign]

If you have problems with keeping the menu overlay open, try removing the "mouse leave" interaction and instead check "Close when clicking outside" in "Overlay" under "Interaction details". Hope this helps 👍

[tayloradams]

This is super helpful, thanks! I am running into the error/bug of when the drop down parent is hovered, it doesn't do the hover effect. I thought it was me and rebuilt the entire nav and components...then realized it is a Figma bug. Maybe too many interactions in one component?

[simbawonwon]

This is great. I think we are missing the interaction when you hover on the dropdown_parent default, it doesn't change to the hover effect (black text in this case). I'm struggling in creating that interaction.

[AmbarMacarena]

Gracias por tus videos! para solucionar el tema del menu sobre el menu, apliqué un menu acordeon entre las opciones, asi no es tan dificil desplegar opciones entre cada menu item

Saludos!!!!

[maryamshabafrooz]

Resources doesn't get bold when you hover on it

[antaris]

By far the best and most useful tutorial for building a real flexible menu. Zhank you so much.

[orcusdei]

I love you! This is exactly the approach I knew it must work but wasn't sure how to make it. Helped me tremendously! Thank you!!!

[mrwaseem]

overlay is blinking while hover the mouse on resourcs

[alexanem]

I watched till this episode and I just wanted to say thank you sir!! I am going to watch ell episodes of your series. Thank you, you helped me a lot!!!

[lanyagilcalderon]

Super helpful, finally I'm understanding a lot of little things that were not taught in my school, but I did not get how to make the radius apparent?

[camillestarr]

This is such a helpful tutorial. Thank you so much!

[kikirinzani]

Resources menu does't change color when on hovering

[ahsunhabibrasel]

Wow! what a episode these is. Thanks for sharing these awesome.

[MrBalloonatic]

Great tutorial, thanks :)

Is there a reason the drop-down menu wasn’t made into a component?

[TurboldBatsukh-yteh]

02:46 In this video, we will create a dropdown menu for the header navigation.

05:32 Creating dropdown menu items in Figma

08:18 Customize dropdown menu navigation in Figma

11:04 Creating a dropdown menu with menu items for resources, blog, success stories, case studies, and press

13:50 Designing the dropdown menu in Figma

16:36 Create a dropdown parent menu item with an arrow

19:22 Create an interaction to open and close the dropdown menu on mouse enter and mouse leave

22:08 Setting up a dropdown menu in global navigation on websites

[learntoearn]

The problem Is that drop down menu icon didn't change from facing down to facing up

[nicolakoroglu]

How can you successfully apply a OnClick URL to the Resources text, should you want to?