By Howard Pinsky
Hey everyone, I'm Howard Pinsky. And in this Adobe XD video, we're going to take a look at how you can build out multilevel drop-downs using nested components. Let's get to it.
Alright. Here we are, back in Adobe XD. And we're going to start the process of building out this nested drop-down menu by designing the various elements that will go inside of it. So, starting off like we almost always do, with the good old Rectangle tool, I'm going to draw one out right in this area here. Make sure it's centered in the middle of my document and then I'm going to round out the corners quite a bit to give it a nice fun feel. Now for the styling, we're going to go ahead and keep the background color at white but we're going to add a little bit of a border. We're going to keep it around gray. But we're also going to add a little bit of blue in it. Just so it's nice and subtle. And we might also want to go ahead and bump up the size to about 2. And for this particular shape, we're not going to be adding a drop shadow, but for the submenus, we definitely will be.
Now on the inside of the shape, we want to add text so that users know what they have to do. So with the Text tool, shortcut key T, I'm going to type out: Select an option. I'm going to make sure to left align it and... it's looking a little bit small so I'm going to bump this up to around 32. And it may even want to bump up the weight to about Bold. And I'm going to make sure to position it in the center of this particular container. Now over to the right, we want to give users the indication that this menu drops down, so grabbing the Polygon tool, shortcut key Y, I'm going to drag one out to right about here. And since we're going to be starting off in the collapsed state, I'm going to go ahead and flip it upside down and, let me zoom in so you can see exactly what's going on. I may want to grab this handle on the inside and round it out just ever so slightly to make this entire shape a little bit smaller and then sample the blue that we've been using over here to the left. And of course, if you have that blue saved in your Assets panel, you can grab it from there. All right, so our first element is looking pretty good. Now, what I'm going to do, I'm going to make sure to select all three of these objects. And then, inside of my Layers panel, I'm going to group them, Command or Control+G and call this: Select. Great.
Now, the next thing that we're going to want to do is to create the submenus that will appear when this object is either hovered or tapped on. And to make that process a little bit easier, I'm actually going to go ahead and duplicate this group, holding down Alt or Option and dragging, and then they can dive in and start making changes. So I can double-click in, make this quite a bit longer... and I'm not going to want this triangle at the top right-hand corner, but I may want to use it down here towards the bottom, to activate an additional submenu. So, I'll go ahead and very quickly, rotate it over to the right.
Now, in this first submenu, we may have four different options. So I'll start by double-clicking on this text layer and just type out: Active. And since these are sub-options, I'm going to go ahead and drop the weight to around semi-bold. And with that one in place, I'm going to go ahead and duplicate another one down. And this one is going to say: Not active. And since this is a non-active state, I'm going to change the fill from this bright vibrant blue to somewhat of a light neutral gray right in this area here, and the rest of the properties will remain the same. I'm going to duplicate one more down and then grab this one at the top, one more time, drag it down. Of course, you can do something very similar using a Repeat Grid as well, and this will be active, but we're also going to use this to activate our submenu.
All right. So we have all four of our options in place. I'm going to go ahead and make sure that they're all aligned from each other. So I'm going to select all four of them. And at the right-hand corner, we're going to press the Distribute Vertically option. And now I can grab these four layers, position them out a little bit so they're about 32 pixels from the top. I'm going to move this so that it looks like it matches and then move our triangle into place.
Alright, that's looking pretty good. I'm going to go ahead and rename this group to submenu and then very quickly, before we duplicate this group, I'm going to go ahead and select this background container and give it a little bit of a shadow. If you watch my videos, you know I like very subtle shadows with a touch of color. So I'm going to add a little bit of blue. I'm going to bump it down quite a bit on the y-axis, blur it quite a bit, and then experiment with the opacity as well. Maybe I'll shift this up just a little bit, bump it down a little bit more and blur once again. And we're left with a pretty subtle shadow that separates it from the background, just a little bit.
Now we're going to go ahead and design out our second submenu. So I'll duplicate this group over to the right and this menu will be a little bit different. We're going to add in some check boxes. So zooming on in here, we're going to start off with the non-active state, which in this case will be not selected. And over to the left we may want to add in our first checkbox. So I'm going to shift this over to the right so I have some room. And with the Rectangle tool, I'm going to hold down my Shift key to constrain it to a perfect square and draw out our box. Since we are going with rounded corners, I'm going to round them out ever so slightly, somewhere around seven, maybe eight pixels, to give it a little bit of style. And we want the inside of this checkbox to look very hollow. So I'm going to go ahead and choose a nice grayish-blue, somewhere in this area here. And then the same thing with the border. We're going to add a little bit of blue to our gray. And since our background colors and nice light blue are ready, I can go ahead and sample that color for the inside of this rectangle.
All right. I'll go ahead and move this on over to the left. Make sure that everything lines up really nicely. And I'm thinking, since we added a little bit of blue to the border of this square, we might want to bring that into the non-selected text layer. So I can either select this layer and then sample this color right over here. Or what I can do is, hop into my assets, add that color to the left, right-click, press Edit, and then sample that blue, so that it pushes those changes to all other layers with that gray text. Great.
So, we now have our non-active and non-selected states created. What we want to do now is turn this into a component, so we can easily toggle between this state and the checked state. So, with both of these layers selected, I'm going to hit the plus button over to the right within the Properties Inspector. Then I'm going to press the plus button one more time and create a new state, which I will call: Checked.
And with that done, I can now dive in and make my changes. So I'll change this text layer to say Selected. I'll go ahead and sample my blue or grab it from my assets, and then for the check box over to the right, shat I'm going to do is, I'm going to turn off the border. I'm going to sample this blue one more time. And then on the inside, we want to add a little bit of a check mark. And I showed you how to do this in a previous video, but go ahead and activate your grid, Command or Control+apostrophe, grab your Pen tool, shortcut key P, and click three times to create a checkmark. Styling wise, this one's going to be super simple. I'm going to change the border to white. Make sure it's a little bit thicker. Make it smaller. And if you prefer, you can also round up the caps and round out the joints as well. Maybe I'll bump this up, one pixel. And if we take a quick peek at our Preview, it's looking pretty good. Now, pressing Escape to go back to the parent component, we can go ahead and check out. We have our default state and we have our checked state. And with both of these now in place, we can wire it up.
So hopping into Prototype mode, what I want to do is select the entire component and then, over to the right, I'm going to click on the blue handle, which will allow me to choose a destination state within the Properties Inspector, which in this case is our checked state. Now, since there are no elements to really animate, I'm going to switch this over to a simple transition with no animation. And now we can go to my check state, click to choose the default state as the destination, and keep the rest of the properties the same. So if I press the Play button at the top I can click, click, and click. All right.
So with that created, what we want to do now is place this into a group and create a few more. So I'll go ahead and move this on up. I'm going to delete all the other text layers that are part of this particular group at the moment. And with this first component selected, I'm going to very quickly name this in my Layers panel and then pop it into a group, Command or Control+G, and call this Options. Now, we can either place these into a Repeat Grid or into a stack. And because I'm using a component for the entire object, we probably don't need a Repeat Grid at this time. So I'm going to go ahead and turn on a stack within the Properties Inspector. It did define it as a horizontal stack because there's only one object inside of it. So I'll switch it over to vertical. And now I can dive in, select the component, duplicate, duplicate, and duplicate. Then, with my Shift key held down, I can adjust the spacing all at once. And now we have all four checkboxes. As I press the Play button at the top, I can go through, make changes as I need to.
But one other thing we might want to happen... Not only on these checkboxes, but on these options over here to the left, is as we're hovering over each and every option, we may want a very subtle hover effect. And here's how that can be done. So we're going to start off in this section over here. We're going to dive into this group. And with the Rectangle tool, I'm going to draw one out across this group, round out the corners quite a bit, so it matches that parent container. And I'm going to make sure to place this behind all of our options. Now, styling wise, we don't need a border for this one, but I'm thinking we might want a nice light blue. So if I go ahead and make some changes right here, right around there looks pretty good. And this will look nice behind the blue and the gray as well. And maybe I'll go ahead and just lighten it up, just a touch more... right about there. So it's nice and subtle.
Now, what we're going to do is we're going to use this newly created rectangle to create our hover effects. So within the Properties Inspector, one more time, go ahead and hit that plus button. And since initially, we don't want this to be seen, double-click into this component, and simply turn the opacity down to zero. And once that's been done, hit Escape to go back to the parent. Press the plus button one more time and go ahead and create a hover state, which is automatically going to be wired up as indicated, by the lightning icon over to the right. And with that created, dive into this component. Grab the opacity and bump it back up to 100%. And now we have our hover state and our default state. And if we press Play, we can go ahead and hover over the section and it's going to light up.
Now, even though it's wired up by default, Auto-Animate is the chosen type, which in this case, we probably don't need. So I'm going to go ahead and hop into Prototype mode. With the main components selected, I'm simply going to switch the type from Auto-Animate to transition, with the Animation set to None. Perfect.
So, with one of our hover states now created, we can go ahead and pop this into a Repeat Grid, so we can use it for all these other ones. So, at the top right-hand corner of your Properties Inspector, go ahead and press Repeat Grid and drag out a few more. Now, if you're having trouble seeing them, just dive into any of these Repeat Grid cells, switch it over to the hover state and then you can go ahead and adjust. Now, you might be wondering, why am I adding the hover state only to the top three options? And that's because this one over here down to the bottom, will have its own hover effect to activate the additional submenu. And I'll show you how that's done in just a moment. What I'm going to do now is, now that we've created this Repeat Grid with our hover effects, which I'm going to very quickly name: Hover. I'm going to copy this to my clipboard, hop into this group over here, and paste it. I'm going to make sure it's behind all of our options and make sure they are all lined up. Now since this one does not have an additional menu, I am going to drag out that fourth one and then make sure that they all are spaced out. Great.
Now, before we go ahead and hide all of these, we may want to grab one of them inside of the Repeat Grid, copy it to the clipboard and then paste it outside, just so that we can use it in this area over here. Now, what you might be noticing is, because we have these different groups created, and this group is on top of the group in the back, we can't see the link that we want to activate. And there are few ways to get around that. You can either combine everything into one group and layer things properly, or you can grab the shape in the Layers panel, drag it behind the container. And then within the Properties Inspector, simply set the blend mode to multiply. And that will allow you to see through the shape to the link in the back. All right, so now we can go ahead and not only reduce the opacity of this particular layer, but also dive into the Repeat Grid, and set the hover components back to our default state.
Alright. So we've gone ahead and designed out all of the menus and now comes the fun part of wiring all of this up so that it works. And to hopefully make this understand, we're going to be working backwards. So we're going to start with our second menu, which contains our checkboxes. And since these are all going to activate on hover, we're going to go ahead with that whole group selected, hit the plus button beside Component and we want to make sure to define our initial state. So we're going to dive in here to this group, we're going to hide all of the layers inside of the Layers panel, except for the shape that we're using as the hover, which I'll name, just so we can see Hover. This one, we are not going to hide, but we're going to turn down the opacity to zero. And you'll notice, when I have that particular component selected the balance squeeze on in nicely. And with that done, we can go ahead and create our hover state. And for this one, we're going to dive in and start by selecting that shape that we're using as our hover, bump up the opacity to 100%, and then unhide all of the other layers. Perfect. So, our second submenu is now complete. We have our default state and we have our hover state.
And now, what we want to do is want to take all of this information and place it into a much larger component. So, selecting all the layers, either within your Layers panel or with a marquee selection, go ahead and hit the plus button one more time. And then since we only want this object at the top to be visible immediately, we're going to dive in here. And like we did earlier, we're going to simply hide those layers. And one more time, hit the plus button over to the right and create one more hover state. We're going to dive in, unhide those layers. And now we have our default state and our hover state. And then inside of this, we have our submenu with our default state and our hover state. Now, you might be noticing that our once main component of our submenu is now an instance, and that's because it's nested inside of a larger main component. So, if you did want to make changes to this component, you can right-click, press Edit main component. And then you can make changes to your default state or your hover state. And if you need to, you can always hop into Prototype mode to tweak your interaction. Again, like the other one, I might want to change this to transition with an Animation set to None. And while I'm in Prototype mode, I'm going to make sure to do the exact same thing for the default state of our Select an option drop-down, switch it over from Auto-Animate to transition with an Animation set to None. Now, of course, if you did have objects in here that you wanted to animate, you can definitely keep it at Auto-Animate.
All right. Now if all has gone well, we should be able to see this in action. Let's go ahead and press the Play button at the top. We can hover over our initial drop-down, hover over the links. Hover over the submenu, which will reveal it. We can hover over all of these options as well. And we can also activate the various states by clicking. And as you move off of these options, the menus do disappear.
And that's how you can design and prototype multi-level dropdowns, using nested components in Adobe XD. In the next video, we're going to be using 3D transforms to add some fun interactions to your payment screens. I'll see you all soon.
Prototype multilevel drop-down menus using nested components and component states. In this tutorial, you’ll see how to design elements of a navigation menu and wire it up to add interactivity. Use the Rectangle and Text tools to draw shapes and add labels to menu items. Style the submenus with rounded corners, drop shadows, and borders. Create one submenu and duplicate it to create four. Select the set and group it, then duplicate the group to create another set of submenus. Convert groups to components and set up component states. Hide layers and adjust opacity. Add rollover and tap effects to nested submenus that show and hide the submenu items.
