How to use the Dropdown element in TeleportHQ

Here’s how you can use the dropdown element to create advanced dropdown menus for your navbar in TeleportHQ.

Adding dropdown to canvas
Editing the menu
Adding and removing new menu items
Creating sub-menus
Changing element position
Styling dropdown elements
Testing the dropdown menu

Add a dropdown element to the canvas

To add a dropdown element to the canvas, go to the Left panel, in the Elements tab. From there, scroll to the Interactive section at the bottom and drag the Dropdown element into your desired position on the canvas.

Edit the menu

To edit the dropdown menu, use the Hide/Show switch to change between its active and inactive states. To activate the switch, go to the Right panel and open the Dropdown settings section. Select the dropdown element, or simply click the purple gear icon next to it.

Switch to Show view whenever you want to edit the text on the dropdown menu items.

To change the text on the Dropdown element or any of its items simply double click on the text and change it to wherever you like.

Add new menu items in the dropdown menu

To add more elements to the dropdown menu, select the main dropdown element. In the Dropdown settings, click “Add menu item”.

To remove items from the dropdown menu you can just select them either on the canvas or in the Layers & Files tab and hit the Del key.

Create sub-menu and sub-menu items

To create submenus from the dropdown elements that you have already created, click on a menu item, then go to the Dropdown settings and click on the “Convert menu to a dropdown”.

Once you've changed it to a dropdown menu, it will have the same settings available as the main dropdown element.

Change element position in the menu

To change the position of menu items in relation to the main element, select it and from the Dropdown settings section choose one of the four preset positions: left, right, above or below. This option is usually used on submenu items to give the entire menu a cleaner look.

Style and format the dropdown menu elements

Like any other element, the dropdown menu can be styled to your preference. All of the components of the dropdown menu can be styled visually in the editor.

Select the elements you want to edit and from the Right panel in the Visual tab you can change: margins, paddings, background colors, borders, radius, shadow and more.

Testing the dropdown menu

Once you have the correct structure and styling for your dropdown menu, select it and go to Dropdown settings. There you will find a Design/Play switch. Turn the switch to Play to preview your menu in the canvas, without having to preview the entire project.

Updated on: 23/02/2023