In this guide, we will show you how to build an interactive dropdown.
Interactive prototype - click to interact:
To follow these instructions more easily, we recommended using the same names as we do for each cell. You may download the final project file here.
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.
In general, we recommend to finish building the interaction first. Then duplicate the element and adjust the text. This way you'll save time and won't have to manually build interactions more than once.
We should now have a dropdown element that is quite interactive already.
Enhace it with JS to make it more realistic
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:
Congratulation, you just build your own interactive dropdown!
Why not build an Interactive tab bar with content now?