16min

Interactive dropdown

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:

Document image



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.

Document image



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)
Document image



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

Document image



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.

Document image





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.

Document image

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

Document image

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.



Document image

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

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.

Document image
Document image

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

let activeState = targetCells[1].activeStateIdentifier let text = targetCells[1].valueForKeyInStateWithIdentifier("textString", activeState) let cell = targetCells[0] let states = cell.widget.states states.forEach( s => at.cellSetPropertyInState(cell, "textString", text, s) )



Congratulation, you just build your own interactive dropdown!

Why not build an Interactive tab bar with content now?