Dropdown menu

How-to guide All plans 2 min read

Use a dropdown (flyout) menu for short lists such as About > Our story, Contact, FAQ. It supports several levels, for example Shoes > Sneakers > Running.

Add a dropdown

1. Pick a template

   In the editor’s Elements tree, click Add submenu under a top-level item that has no submenu yet. Point to Dropdown menu (flyout menu) and click Select on Vertical dropdown or Horizontal dropdown.

   

   The two dropdown templates. Each one adds sample items you can rename.

2. Edit the child items

   Hover over a sample item and click Edit Item to change its Title and Link. See Edit a menu item for Icon, Image icon, Description, Badge and Visibility.

3. Add items and levels

   Click Add items to add an item at the same level. Click Add dropdown under an item to give it its own deeper list.

4. Save and publish

   Click Save, then Publish.

Templates

Vertical dropdown

Items stack in a column under the menu item. Deeper levels fly out to the side.

Horizontal dropdown

Items show in a row across the full width under the menu bar. Each deeper level opens as a new row below.

Dropdown settings

Hover over the parent item, click Edit Item and scroll to Submenu. You don’t need to rebuild the dropdown to change its layout.

Type

Vertical dropdown or Horizontal dropdown. None turns the dropdown off but keeps its items.

Width + alignment

Vertical dropdowns only: Center, Left or Right under the item. Horizontal dropdowns always use the full width.

Height + alignment

Replaces Width + alignment in a vertical menu, for vertical dropdowns: Center, Top or Bottom.

Change or remove it

• Pause it — set Type to None. Items are kept.
• Switch template — set Type to None, then click Add submenu again.
• Remove an item — hover over it and click Delete Item.
• Keep it shallow — about 3 levels at most; deeper menus are hard to use on mobile.
• Use a label — an item without a link only opens its own list.
• Need images or columns? Use a mega menu.

Troubleshooting

The dropdown doesn't open on my storefront

Check that Type isn’t None, the dropdown has at least one item, and you clicked Save and Publish. For theme issues, see Why doesn’t my menu show?

Related pages

• SubmenusCompare dropdowns, mega menus, tabbed menus and masonry layouts, and pick the right submenu for each item.
• Mega menuBuild a wide submenu panel from blocks such as link lists, images, products and a contact form.
• Edit a menu itemChange an item's title, link, icon, colors, badge, submenu and visibility, or duplicate, move and delete it.

Was this helpful?

Report an issue