A dropdown menu is a pre-built navigation element that can be added to almost any area of a project. Most often times you will see a dropdown element in the Navbar of a website. 

Adding a Dropdown Menu

From the Add Panel on the right, you can drag the dropdown element to the desired location in your project. 

 

Anatomy of a Dropdown Menu

Within the dropdown menu there are two child elements: the dropdown toggle and the dropdown list.The dropdown toggle consists of a text block and an arrow icon.    

 

Dropdown settings

The Dropdown List isn't visible until the Dropdown is clicked, but you can make it visible by going to the Settings Tab and enabling the “Open Menu” option.

 

By default, the Dropdown List appears when a user clicks on the Dropdown Toggle, but you can make it appear when the user hovers over the Dropdown Toggle by enabling the “Open menu on hover” option. The close delay time, the time it takes for the Dropdown List to close after hovering out of the Dropdown Menu, can be adjusted in milliseconds.   

Links inside Dropdown

Within the dropdown list there are three dropdown links. You can view and edit these by selecting the dropdown menu, going to the settings panel, and clicking “Open Menu”. You can double click inside the dropdown links to edit the text–this will also adjust the width of the link. 

 

You can move the links around by click and dragging them on the canvas. Alternatively, you can click on the Navigator Panel and drag the dropdown links around from there.

 

You can choose where each link will lead to through the Element Settings Panel. You can also choose to add another link by pressing the Add Link button, or you can duplicate by copy and pasting.

 
Custom dropdown
If you want to make the dropdown toggle a link, drop a text link inside of the dropdown toggle and delete the default text block, "dropdown". Adjust the padding of this text link so the clickable area is larger. Also, set the left padding of the dropdown toggle to 0. This way, the text part will be a link and the arrow part will open the dropdown. Style it as you'd like.
If you want the whole dropdown toggle to be a link, check out how to create a custom dropdown and use a link block to create the dropdown toggle instead of using a div block. Note that in this case, you'll need to trigger the dropdown menu on hover since clicking the trigger will redirect you to the linked source.

Styling the Dropdown and links

Styling the Dropdown works the same way as styling other elements—first give each element a class name and then start styling. There are two states that the Dropdown can be in—Normal and Open. The Normal state is the default state when the Dropdown is closed and the Open state is when the Dropdown list is visible. When the Dropdown list is made visible by clicking on "Open Menu" in the settings, a special class is added that allows you to customize that state. You can edit the Hover state for the Normal and Opened state.  

 

To edit or style a Dropdown Link, select it in the Navigator. Alternatively, open the menu, then select it on the canvas. You can also add a hover effect to the Dopdown Links.

  1. ‍Select a Dropdown Link
  2. ‍In the Style Panel, choose Hover from the States menu
  3. Once selected, a Hover class will appear 

Any changes made with the Hover State selected will only be visible when the Dropdown Link is hovered over.