> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use the Dropdown element

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

|    |    |    |
| --- | --- | --- |
| [Video tutorial](#2-video-tutorial) | [1. Adding dropdown to canvas](#2-add-a-dropdown-element-to-the-canvas) | [2. Editing the menu](#2-edit-the-menu) |
| [3. Adding and removing new menu items](#2-add-new-menu-items-in-the-dropdown-menu) | [4. Creating sub-menus](#2-create-sub-menu-and-sub-menu-items) | [5. Changing element position](#2-change-element-position-in-the-menu) |
| [6. Styling dropdown elements](#2-style-and-format-the-dropdown-menu-elements) | [7. Testing the dropdown menu](#2-testing-the-dropdown-menu) |    |

## Video Tutorial

${youtube}[How to create a dropdown menu in TeleportHQ](NRZRCXuOsCE)

## 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.

![Adding dropdown element to canvas](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-adding-dropdown-element_5onxqi.gif)

## 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.

![Editing text in the dropdown elements](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-editing-text-in-dropdown_7ju8gz.gif)

## 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.

![Adding and removing dropdown elements](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-adding-dropdown-elements_1id0vny.gif)

## 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. 

![Converting elements to submenu elements](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/4-adding-submenu-elements_fgt51i.gif)

## 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.

![Changing the submenu position](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/5-submenu-position_1simcpk.gif)

## 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*.

![Styling dropdown menus](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/6-syling-dropdown-elements_h73546.gif)

## 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.

![Testing the dropdown menu](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/7-dropdown-menu-preview_ow5hw6.gif)