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:
- Click on the Navigation tab in the upper horizontal menu of the Sitebuilder:
- 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.
- 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.
- 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:
- 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:
- 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.
- Repeat this step to create as many links in your drop-down menu as you want. You can create a complex structure of navigation.
- Click Submit to confirm the changes and Publish the website to make changes live.
- Check out the result:
Here, History and Download - German are sub-menu items of the second level.
Tip: 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:
- 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:
- To remove the drop-down menu completely and bring all pages back to the main menu, repeat 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.