Drop-down

Build custom drop-down elements using our Multi-state component and building transitions. 

What is drop-down?

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are toggled by clicking. This is a great way to display menu items or list items.

How to create drop-down

Insert a Multi-state component. This component is very useful to build custom animations and transitions for your objects.

Enter this component and add full content (drop-down button + menu items). 

Select all your objects and group using Ctrl+G or Cmd+G . Crop to only display the drop-down button. This first state represent drop-down as closed. 

Create new linked state in Multi-state by clicking the orange button and edit mask to display the menu item. This second state represent drop-down as opened.

Now you need to create the action to open drop-drown menu. Go to state 1 and select the drop-down button. Click Actions, choose Single Tap and the action Interact with a component > Multi-state > Go to state 2.

Do the same on state 2 to close the drop-down menu.