In this guide, we will show you how to build an interactive dropdown.

Interactive prototype - click to interact:





Build the basic structure



As a reference, this will be our final structure:



First let’s create the basic elements. Create a container DropdownWrapper with a label, value and icon. Apply styling as you like. But set the height to a fixed value, in this case 56px.



Also we need another container DropdownContent for the dropdown items:

• Set the layout to vertical
• Add a ListItem to the DropdownContent
  • Create a widget from it
  • Add predefined states Mouse Over and Pressed
• Add scrolling to the container
• Set the container to a fixed height (set the height, so not all list items are visible and scrolling is possible)



Next we need to group DropdownWrapper and DropdownContent and set the height of the group to a fixed value, in this case 56px.



Now create a widget from the group and name it Dropdown . Add predefined states Mouse Over and Pressed. Apply styling as you like.

We also need a custom state, which we call Open. Since the dropdown content only needs to be visible in its corresponding state, set its height to 0px and the visibility to 0 in the Normal / Mouse Over / Pressed state. Also set the content of the DropdownContent element to individual.





Make it interactive

Now let’s add an interaction to the widget. We will need a toggle state interaction and select the two states Normal and Open.

We can also activate the State Change Animations for all states.

When entering the In-Place Presenation Mode(⌘ ⌃ P) we should now be able to toggle the widget with a left click.

Since the dropdown should be closed when you click on an entry we need another interaction.

Add a change state interaction to the ListItem. But now switch the Dropdown widget to its Normal state.



We should now have a dropdown element that is quite interactive already.





Enhace it with JS to make it more realistic

The only thing still missing is changing the value to the selected list item. For that, we will use a little bit of Javascript. Don't worry, if you are not familiar with it: we will just copy and paste the required code.

Basically what we want to do is taking the value of the list item the user just clicked and write it to our value in the dropdown. To do that, we need another interaction group and select the two text elements as our target cells. First element is the value in the dropdown, second element is the text in our list item.

We then select Script as the action and copy paste the code below: