How to create a dropdown menu

In TeleportHQ, the Dropdown element is a button that opens a list of links, for example a Cakes menu with Birthday, Wedding and Cupcakes. Drag Dropdown from Elements → Primitives → Interactive onto your page, for example inside your site's navigation. Select it to open dropdown settings, where you show the list for editing, choose where it opens, add menu items and turn items into submenus.

Before you start#

• The Dropdown element works in websites and web apps.
• For a full site menu, add a navigation bar first, then put the dropdown inside its Navigation component. See How to create a navigation bar with a mobile menu.

1. Add the dropdown#

1. In the left sidebar, click Elements.
2. On the Primitives tab, scroll to the Interactive group.
3. Drag Dropdown onto the canvas, for example next to your navigation's links. Or select a container and click Dropdown: it goes inside that container.

A dropdown has a Dropdown Toggle (the part visitors click), a Dropdown Arrow and a Dropdown List with the menu items.

2. Edit the menu#

1. Select the dropdown. In the right panel, find dropdown settings. You can also click the purple gear button above it.
2. Set Menu to Show. The list opens on the canvas so you can edit it.
3. Double-click the toggle text and type the menu name, for example Cakes.
4. Double-click each item and type its label, for example Birthday cakes.
5. Select each item and click the link icon above it to choose its page. See How to add links and buttons.
6. Set Menu back to Hide when you're done.

3. Add or remove menu items#

• Add: select the dropdown and, in dropdown settings, click Add menu item. A copy of the last item is added to the list.
• Remove: select the item on the canvas or in the layers tree and press Delete or Backspace.

4. Choose where the list opens#

1. Select the dropdown.
2. In dropdown settings, next to Position, click left, above, right or below.

Use right for submenus, so they open beside the parent menu.

5. Create a submenu#

1. Select a menu item inside the list.
2. In dropdown settings, click Convert menu item to dropdown.

The item becomes a dropdown of its own, with the same settings.

Check that it worked#

Select the dropdown and click Preview in dropdown settings, or the green eye button above it. The banner "You are in live preview mode." appears, and you can open the menu on the canvas. Click Exit Preview to go back to editing.

Troubleshooting#

I can't see the menu items to edit them The list is hidden. Set Menu to Show in dropdown settings.

"Deleting essential nodes from the interactive elements is not allowed." The toggle and the list are required parts of a dropdown. Delete individual menu items, or the whole dropdown.

The dropdown settings section doesn't appear The dropdown is inside a component copy on the page. Open the component to change it. See How to edit a component and update every copy.

Good to know#

• Style each part (toggle, list, items) like any element: select it and use the right panel. To change an item's color on hover, see How to add hover and click effects.