Creating drop-down menu or a submenu

The dropdown menu is very useful in the navigation header as helps display a list of related links when your visitor hovers or click on the link. A drop-down menu helps declutter the main menu and make the navigation easier. 

Here's how you can create a drop-down menu:

1. Navigate to your Header block and hover over any element to trigger the Edit navigation menu. Click on the stacked line Navigation settings icon:

2. You will see a list of your pages. If necessary, extend the window by using a handle at the bottom-right corner. For this example, we want to create a drop-down menu (submenu) grouping several pages under the link Gifts.

3. To move the pages you want (in this example, all gift-related 🎁pages such as Handmade gifts, Unique gifts, etc) under one drop-down menu, click on the hamburger icon in the page element and drag it inside the Gifts page element.

The result:

4. Repeat step 3 to move all the pages you want to bring into the drop-down menu. Your Navigation settings should now look similar to this:

5. Click Submit to confirm the changes. Publish the site to view changes online:

Add an extra level of dropdown menus

To create an additional drop-down menu that would open when your visitor points to a first-level submenu item, follow the same steps as outlined in step 3 above:

1. In the Navigation settings menu, grab the hamburger icon of the page element you want to add to the second-level submenu and drop it inside the page element which would host this menu. Release and see the new element appearing below the main element.

2. Repeat this step to create as many links in your drop-down menu as you want.

3. Click Submit to confirm the changes and Publish the website to make changes live.

4. Check out the result:

Removing pages from the drop-down menu

To remove the second-level drop-down menu or bring the page back to the upper-level submenu, follow these steps:

1. In the Navigation settings menu, grab the hamburger icon on the page you want to relocate and move it into the upper portion of the list so that a line appears inside the upper-level page element:

2. To remove the drop-down menu completely and bring all pages back to the main menu, repeat the  step 1 but drop the pages, not inside another page but where a guideline appears:

Your pages will return to the main menu, however, if there's not enough space, they would be automatically moved to the More submenu. Learn more about managing More submenu in this tutorial.