Multilevel Dropdown

This tutorial shows you how to build a multilevel navigation through the stages of building a simple button navigation and dropdown navigation. You can either follow the entire tutorial or finish at whichever stage you want.

→ Download a ready .uxp file for this tutorial.

Setting up the Design

1. Start by creating a navigation bar using the Box element from the Quick tools menu.
2. Place a Box element on the navigation bar and add a text element on the box. Type in the category name.
3. Group the box and the text element.

Simple Button Navigation

1. With the selected group, click Add State in the Top bar. You’ll have State 1 (the Base) already created. Create the second state and name it Hover. Click Enter.
2. In the Hover state, change the content’s design (color fill or opacity) to create a hover effect.

Adding Interactions

1. Select your menu category group and click + at the top of the Properties panel to add a new interaction.
2. Select While Hovering under Trigger.
3. In the Action section, choose Set state.
4. Under Element, select your category group.
5. In Set state, choose Hover.
6. Click Add.

You can now create as many categories as you want by duplicating the category group with added states and the interaction. Then, preview your prototype.

Dropdown Navigation

1. Choose Box from the Quick tools menu and place the box right below a category box to create a dropdown.
2. Place another box on top of the dropdown background and add content, such as text and an icon.
3. Group the box with its content.

4. Click Add State in the Top bar. Create two states and name the second one Hover. Click Enter.

5. In the Hover state, you can differentiate the text by changing its opacity, color or adding an underline.

Adding Interactions

1. Click the + icon on top of the Properties panel.
2. Select While Hovering under Trigger.
3. In the Action section, choose Set state.
4. Under Element, select your category.
5. In Set state, choose Hover.
6. Click Add.
7. Create more sections by duplicating that section to fill up the dropdown.

Configuring States

1. In the Layers panel, set the navigation bar category group to its Hover state. 
2. Then, select the dropdown group and drag and drop it into the Hover state of the navigation bar category group.

3. Make sure that the dropdown is hidden in the Base - State 1.

4. Preview your prototype.

Multilevel Dropdown Navigation

1. Create a multilevel dropdown background by adding another box next to your first dropdown.
2. Place another box on the dropdown background and add content, such as text.
3. Select the box and the content and turn all elements into a group.
4. Click Add State in the Top bar and create two states; Base - State 1 and Hover.
5. In the Hover state, change the color fill of the text.

Adding Interactions

1. Click the + icon on top of the Properties panel.
2. Select While Hovering under Trigger.
3. In the Action section, choose Set state.
4. Under Element, select the subcategory that will expand.
5. In Set state, choose your section group.
6. Click Add.

Configuring States

1. Create more sections by duplicating the first one and fill up the rest of the second dropdown.
2. Group them all together with the dropdown background.
3. In the Layers panel, make sure that the section group from the first dropdown is on its Hover state. 
4. Then, drag and drop the group from the multilevel dropdown into that group.

1. Also, make sure that the multilevel dropdown is hidden in the Base - State 1.
2. Preview your design.