Create a Functional HAMBURGER MENU NAVIGATION in Figma (Tutorial)

In this Figma interactive prototyping tutorial, we're going to create a mobile app / website hamburger navigation menu in Figma. This interactive component / prototype features 6 pages: homepage, page 1, 2, 3, 4 and 5 that you'll be able to navigate through. We'll be using the "open overlay" as well as "close overlay" prototyping features alongside with working with components and variants (pressed down button state).

How to create / design / build an interactive mobile hamburger navigation menu prototype in figma (step-by-step explanation tutorial)

————————
© 2022 Mavi Design

[sul-dev]

Amazing tutorial. I've never designed before and this was so helpful I created a full mobile nav menu using the skills in this video: creating components, creating auto layouts, prototyping interactions. Thanks so much.

[raqueliatheimpatientgardne]

Thank You for the great instructions! Easy to follow and it works like a dream! New sub. Thanks again!

[sarinasaheli]

That was great, straight forward and easy to understand for me . Thanks a lot🙏🙏

[dgitalnative]

As a figma Newbie who just starts, this is so fascinating :D I need a half day for this i guess, and youve done it in 15 min. The good thing, everyday i learn something new and getting faster :-)

[michaelsmilas]

thank you so much, I've been struggling for hours to wrap up a mobile web design because I couldn't figure out how to make a menu that's actually functional

[raqueliatheimpatientgardne]

Just one question which I am sure I missed this somewhere. But when I view the prototype it shows the "X" close mark over the three lines when the three lines are clicked/tapped. How do I get the three lines to NOT show after tapping or clicking and just show the "X, " close button? Thanks R

[JorgeTT.]

Wow, that was a whole masterclass, I had to watch it again over and over, Because It wasn't working lol. But then It is currently working for me. Thanks-

[dhananjai]

Dear Sir, clicking on Hamburger menu it open the menu item with respective link, I would like to know if there's any change can we show icon (example - Home icon etc) as a default which will have a link to the respective page. Above home icon there will be Hamburger menu, clicking on the Hamburger can we show Icon + Home text?

[yhkomgi]

It is great tutorial. Just one thing, the close icon does not move with the menu? I am not sure how to fix it?

[stevef]

This was by far the best menu tutorial. Nice work. You should do a new one that accounts for some of the changes in Figma's design panel.

[Purv.]

okay so someone help me in this.. as u can see on 1:22 when u duplicate it, it creates 2 another layers which u can then customize individually. but when i duplicate it, all comes under vector 1. and not another layers are made. so i cannot customize individual lines only can select them as a whole. am i doing something wrong?

[MrsAmerica]

Can you say the shortcuts you use bc it makes it more complicated to try and guess

[pookiecookie]

why does the component not work when you copy and paste it into another project? i've done this before with other ones and have had no issue

[Anna-rntc]

after creating the new component property menu button text, there is no option to change the text of the button. there is a switch on/of toggle. whilts creating the component property, your video shows that the value is assigned as Menu button. I however can only choose between True and False... can someone help me? 😅

[KohitiStridah]

could I get a tutorial for desktop please?? For some reason the option to use content option is showing up.

[simix]

That might be the best and clearest tutorial I've ever seen. Good job and keep it up :)

[Michbck]

Thanks this helped a lot! But how about you make an selected state for the entries in the pageselection? For example, showing that page 3 is active.

[jeffersonmarvel]

6:00 i didnt found the content, im just already following on your tutorial

[arielcopo]

Try to scroll down, let see if your navigation will stay on fix position or it will scroll down.

[marienoeI]

Spacing mode doesnt show up for me for the Header auto layout