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.