Creating a drop-down menu

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

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

  1. Click on the Navigation tab in the upper horizontal menu of the Sitebuilder:

Screen_Shot_2020-08-12_at_14.18.54.png

 

  1. You will see a list of all links in the navigation. For this example, we want to create a drop-down menu (submenu) grouping several pages under the link German.

  2. To move the pages you want (in this example, pages such as German About, German Services, etc) under one drop-down menu, click on the hamburger icon in the page element and drag it inside the German page element.

Screen_Shot_2020-07-31_at_18.33.25.png

The result:

Screen_Shot_2020-07-31_at_18.36.26.png

  1. 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:

Screen_Shot_2020-07-31_at_18.34.51.png

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

Screen_Shot_2020-07-31_at_18.42.54.png

 

Add an extra level of dropdown menus

To create second or third levels of the drop-down menu that would open when your visitor clicks or hovers over the 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.
  2. Release and see the new element appearing below the main element.

Screen_Shot_2020-07-31_at_18.47.04.png

  1. Repeat this step to create as many links in your drop-down menu as you want. You can create a complex structure of navigation.

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

  3. Check out the result:

Screen_Shot_2020-07-31_at_18.46.22.png

Here, History and Download - German are sub-menu items of the second level. 

You can create up to three levels of a drop-down menu:

Screen_Shot_2021-03-24_at_12.23.06.png

To make all the menu items visible on the screen, move the expandable menu link closer to the center of the navigation bar. If you put it too close to the side of the page, the drop-down items will not display well.

 

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:

removing-drop-down-1.gif

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

removing-drop-down-2.gif

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: Expanding the navigation menu.

FAQ

Can I link to a downloadable file in the submenu?

You can create a downloadable item, such as a menu in PDF or a price list, as a submenu in your header navigation. Here's how to do that: 

1. Navigate to your header and activate the Navigation settings menu by clicking on the stacked item icon.

2. In the menu, click on the round + button to add a new navigation menu.

3. For this example, we will be adding a link to a downloadable file as a submenu item for the main navigation item Services. In the New item menu, choose the Click action as Download a file, choose the file from your computer, and enter the name, for example, the Pricelist.

4. Click Submit. The new item will appear in the list of navigation items.

5. Grab a Price list block and drag it inside the Services link, so that it covers it completely. A black outline will signal that the Price list is being inserted inside the Services link.

Release it and the Pricelist will appear beneath the Services block. 

6. Click Submit and Publish. Your Price list will appear as a submenu item beneath the Services  menu item.

Other helpful articles

Adding a navigation bar

Managing navigation in the header

Creating multi-language site navigation

Customizing storefront navigation and colors

 

Was this article helpful?
0 out of 0 found this helpful