Creating drop-down menu or a submenu

Drop-down menus or submenus are great for large websites with complicated page hierarchies. Displaying a list of item links related to the menu in your header navigation can make finding the right page easier for site visitors.

Note: Creating submenus is done through the Navigation settings where you can only work with the existing pages. Before creating the drop-down menu, you need to create the pages you want to arrange in the menu. 

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

  1. Click the Navigation in the Topbar to open the Navigation settings with the list of your navigation items.
  2. Click the hamburger icon of the item and drag it to the parent-page name.

    no-logo-creating-drop-down-01.png
  3. Click Submit to save. Publish the site to view changes online.

As a result, you will have a navigation menu item attached to the parent item which creates a 2-level page hierarchy. 

no-logo-creating-drop-down-02.png

Tip: You can add as many page items to your drop-down menu as you want. However,  it’s advisable to keep it short to avoid confusing your visitors. 

You can also add an extra level of drop-down menus by repeating step 2 outlined above.

In the Navigation settings menu, drag the page item you want to add to the third-level submenu and drop it inside the parent element.

no-logo-creating-drop-down-03.png

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

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 may overlap other elements of the site.

Removing page items from the drop-down menu

You can completely remove the item from the drop-down menu by clicking the trash bin button near its name.

Or you can change the level of the item in the submenu by dragging and dropping it between the upper-level menu items. 

Here’s how to do this: 

  1. In the Navigation settings, click the hamburger icon of the item you want to relocate and drag it to the upper-level list of items. 
  2. When a line appears between the upper-level page elements, drop the item you’ve been dragging to the highlighted place.
  3. Click Submit to save the changes.

Note: If you relocate all your items to the main menu and there’s not enough space for all the items in the design, they will be automatically moved to the More submenu. Learn more about managing More submenu in our Expanding the navigation menu tutorial.

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