Hi everyone. In this video we're gonna make this. Look at this. It's a dropdown menu. Ooh. And you can hover above stuff.

Ooh, fancy. You can go to different pages. A giant page too. It gets better. We're gonna have a second level. We can go to more options.

And look, there's a second level. Now, this particular method, there's a couple of ways  of making dropdown menus work in Figma. This is, this is probably the easiest way. We'll do another one in the next video  that's slightly harder, but a little bit more robust. You'd use this one to get started. Okay?

And it's really good if you've just got one or two menus. You want to add a bit of interactivity  to this particular method uses a bunch  of open overlays, okay? Where we just have a menu on the side  and we just open it in a position underneath the button. It's a nice, easy way to get it working. Alright, let's jump in and show you how it works. Alright, to get started, I've created a new design file, uh,  just to keep it separate from everything else  'cause it can get a little messy, confusing.

Uh, and I've created three frames. Uh, a page one and page two, I'm using a desktop view, okay? Mainly 'cause in this drop it,  like you said at the beginning, there's a hover action  and you can't do a hover on a mobile device,  but people wanna do it on desktop. So that's what we're gonna preview on  and we'll have our components here. Okay, let's make two buttons, okay? Uh, I'm gonna use the type tool, click once  for some reason using Giant,  for some reason I'm using giant text, okay?

Uh, I'm gonna make mine more appropriate. Escape Shift A make it, uh, auto out. I'm gonna give it a background color and some padding. You wait there, okay? There's nothing fancy about it. I'm gonna have two of them.

I'm gonna have my filter. And when you click it down, I'm gonna have menu item. This menu item, because they're gonna be lots  of different lengths, okay? What in at least bits of type. I'm gonna say I want it to be a fixed high and width. Okay?

And I want this one to be 180 by 48. And I'm gonna make sure it's kind of lined  to the center of my auto layout. Not important, actually, right in the middle. There we go. So two auto layouts. That is it.

We should make them both components  so we can easily update it later on. Okay? So create multiple components,  not a set, not anything else. Rename them both. Command R call this one button,  shift tab to go up to the next one. And you are gonna be called menu item.

Alright, so what I want to do is this filter. Okay? I wanna grab an instance of it actually this filter,  when it is clicked, I would like  to open up a bunch of these. So I'm gonna grab some instances of it, okay? And grab one, I'm gonna duplicate them out. Command, D, D, D, grab a few of them, select them all.

And what they need to be is they need to be in a frame. Remember when we did overlays, we click on the button  and say Open overlay. And it says which frame do you want? Okay? It doesn't say which group of  instances or which stack of them. We need to group them all together.

We need to bring them all together in a frame. So that's command option G to make it a frame,  skip out frame and name. Let's call it list one. The thing with overlays is,  let's go back to this button here. So this kind of, we used just,  we'll move him down outta the way we used him so  that we can update him. And he updates all of these items.

Okay? So that's what he's for. But let's forget about him. Sneak him down there. Okay,  what I wanna do now is say this button,  when you are clicked, let's go shift A to go  to prototype mode. Say interaction is going to be when it's clicked,  I would like it to open an overlay of which I can't see.

Why can't I see this one called, uh, list one. Okay. Overlays have to come from no man's land. They have to come from outside of another frame. So it can't be nested inside of it. Let's put it over here.

Now I can say I want the interaction on click. I want you to open an overlay of which one there he is. This one, where do I want it? Let's go manual. And then let's just move it around where we want it. I'm gonna have mine dropping out the bottom.

Put yours where you like and we're gonna have the  close when clicking outside. So when everybody just clicks around, it kind  of closes up the unofficial way to escape a menu. So let's see if that works. So I'm keeping my components over here. Let's drag out a version over here. Okay, on page one.

And I am, and I've got a flow going on this one,  if you don't, I'm gonna say you have a flow on this  page so I can preview it. Okay? And hopefully, ooh, right up there. Ah, for reset, huh? Anyway, uh, click on this. Hey look at this.

I get a menu. Click, click, click. That might be all you want. What if you wanna hover? What if you wanna connect it to a  page, let's do both of those. Uh, so what I wanna do, I'm gonna go  back to my main component.

As you know I'm not, I'm gonna go to this menu item here  and let's add the links. So I'm gonna say when menu item go to design mode,  I'm gonna have menu item one, tab down two, three. There you go. I've changed the names. Now I'm gonna go back to prototype mode. Say when this one is clicked, go  to page one when this one's clicked, go to page two.

I'm gonna make sure the filter is on both my pages. I'm gonna copy it and paste it so  that when I preview this I should R for refresh. Go filter page two. Filter page one. There we go. We've got a menu that works.

Okay, we want some hovers. 'cause hovers are what menus do normally. So that is why we've got this main component here. And this one here we can say I want a variant. Okay? And I want the second one in design mode to be a fill  of this uh, hue saturation brightness.

I'm gonna hit shift and hit down arrow  to go down my brightness, okay? Make it a different color and it's not gonna quite work  unless we add our prototype interactions. So switch to prototype mode to say when you are  what clicked no while hovering change  two, property, one, variant two. That's not quite what we want. And we'll use dissolve. Same thing here.

You go back that way it'll work. We've got some terrible naming, let's just prove it works. First, test, test, test. Okay, let's hover. Ooh, look at us. Awesome, well done us.

Let's name these variants properly. Uh, I have been using the design mode  and using this option over here a lot. What a lot of people do though is they'll double click over  here and say state equals hover. Tab. Tab. Uh,  state Equals default.

It depends like if you're more of a web developer,  you might do it that way. Or if you're like me, I end up doing it this way. Clicking on properties, gimme the state  name and then doing it this way. And then getting really OCD  and going default should be above hover. It makes no difference except  that's the order they are visually anyway. So now just double check.

We haven't broken anything. Nice. It still goes to the pages. Alright? And that my friends is the first level of dropdown menu. Now if you're like me and everything's working, you're like,  huh, how proud am I?

This next step, we'll probably break it. So what we're gonna do is go show version history. So have nothing selected to escape, escape,  escape this little chevron here  and say I want to show version history. Let's save one. Hit the little plus button  and we can add this one before I went  and broke it Just so that we can come back  to when it was working and give it another go. If we break it, why do I do that?

And I haven't done it before is  'cause you'll probably end up breaking it. It's tricky to do this next step. I'm gonna try and explain it nicely. Alright, so what we want  to do is basically do the same thing. We have this main component here when prototype mode,  when it is clicked, it has this menu dropping out. What we wanna do now is we want to do the same thing.

We wanna find this menu item, okay? Which is this little component down here  and when it's clicked have another option. Okay? I don't wanna do it to all of them. So what I'd like to do is down here, you know,  give ourselves some room is I want  to grab this first one command  or control D to duplicate it, okay, I want a third variant. So let's name them.

We've got hover default  and we're gonna have this one called state  equals state three. Nope. We'll call this one second level  and we'll change the name of it to make it clearer. We'll call this one more so  that you know you can kind of click on it. We'll put arrows on it as well in a bit. But you know that you can click on this  and you get another level of menu items.

Okay? So what we're gonna do is we'll duplicate this list. Okay? So that's our kind of like level one. Let's duplicate it. It ended up very far away.

Let's go over there. Okay,  it's automatically called it List two, which works for me. Let's rename these to make them a bit clearer. Alright, so we've got this list that's gonna appear. So over here we wanna say I'm prototype mode, not hover. We can do both of them.

We're going to say,  when I'm clicked, I would like to open a overlay  of list two. I can see it 'cause it's all the way at here. It's not nested in another frame. Where do I want it? Kind of over here to the side. Slightly different place than the last one.

Close. When clicking manual all looks good. Is it going to work? Not straight away. Let's have a look. Uh, filter.

You jumps to the pages. I can't see it here. Why can't I see it here? What I can do is on list one,  I need to switch out one of these for my more one. Okay? And because they're a variant, I should be able to go  through and say, actually let's just click on this one.

Go to design view and say Yes I want it to me. Menu item, which is this thing. It's like uh, component set down here  but not the default one, not the H one but the second level. Look at this. How we doing Inception? Man, this is weird.

Took me a few times to record this in any sort  of like non pulling my hair out, what's left of it. But let's give it a go. So filter is gonna activate this one  of the items in here and this one has some special  ingredients where it shows this other list Here,  let's give it a go reset filter more, click it. Look at us. We're doing stuff now of course we could go  through and when we click these,  go somewhere the moment they're not. But we learned that at the beginning.

Alright, how's yours going? If you need to kind of go back,  remember you can go into here, show version history. Go back to before I broke it. You can click on this one and say wait for a second, go  to there and say restore this version. It's not what I wanna do 'cause  mine's working, but there you go. Other things you might do to tidy it up.

I just moved it around and resize  this to make it look nicer. Um, the one thing is, is we can't have a hover on  this option here. 'cause at the moment if I prototype  and I say I want also a hover, okay,  let's make a duplicate of this. Let's change the color of it real quick, okay? And if I say shift E, you go there  When hovering change two, state four, I should name it. Okay?

Um, but also do the click. Can you see? You get this little warning to say you can't do both. You just kind of like hover above it. Okay? It says indirection cannot be triggered whilst  another one's triggered first.

So I can't make both of those work. I used to be able to, they used to just both work, okay? I used to be able to change the layer order here of these,  but I can't make it work anymore. You might try it and I might try and do both,  but for the moment if I try it, filter, hover, hover works  and I click on it, oh, they're both working again. Oh, if I close it down  and reopen it up, all right, it's working again. Ah, I'll leave that in the course.

'cause man it used to work  and then when I was preparing  for this video, I couldn't make it work. Did the exact same thing, I swear,  but then just couldn't make it work. So hey ho, it says it shouldn't but it's working now. There you go. You might have more problems, no problems. And the other thing I wanna do is I am gonna add a little  chevron there so that people know to click it, okay,  I'm gonna shift, click all of these  to say actually left align them.

'cause I wanna put the little Chevron in. So I'm gonna open up a plugin, okay? I'm gonna use Icon Scout. I like to toggle between all the  different icon plugins I use. I'm gonna use Arrow and I'm gonna click once  SVG insert. And mine's kind of randomly put there.

I wanna grab the outside frame of it. I'm gonna make sure it's uh, the size I needed to be. Actually let's get it to go right around  and actually that's a pretty good size, don't you think? Let's make it a component. Let's grab an instance of that component  and let's put it in with my uh, order layout. And depending on which way you want it, you might, instead  of having four arrows, you can just go  rotate this 90 degrees.

Whether you are dropping down or pushing out. I feel like over here it is dropping down,  but that way is pushing over. So on this one here, we just need  to make sure I'm gonna go centered. Maybe left aligned. Same with this one. Okay, this one's already centered.

The only thing with this is I  probably want it on the outside. It's all kind of squished in the middle. Even if I go center, remember that trick we can do  to push them to the outside to kind  of like space, the middle. So under here, under auto layout instead of packed,  we can go space between. That was the word I wanted. I'm gonna do the same thing.

I'm gonna grab you, copy it inside of this, grab the parent,  go here, say packed space between. You should do this at the beginning when you're creating it. I just didn't want to add too much confusion to this video. Let's go, let's reset it. Filter more. Look at us doing stuff.

Yes, not very pretty  buttons, but hey, they're working for us. Alright, that is gonna be it. That is one way of doing it. Remember this way, here's just really good. If you've got one  or two menus, you need to kind of just prototype. It's quicker, it's easier to understand than the next video.

But the next one's a little bit more robust. People can build more component sets  for a bigger design system. Yeah, let's go and do that now.