# Drop-down menu

> Learn how to build custom drop-down elements using PandaSuite's Multi-state component and transitions. This guide covers creating toggleable menus for displaying lists with ease and interactivity.

https://docs.pandasuite.com/essentials/navigation/drop-down-menu/

**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.

[Video: in the app preview, a tap on All gardens opens a list of four gardens over the park map, and a second tap closes it]

## How to create drop-down

Insert a [Multi-state component](https://docs.pandasuite.com/essentials/components/multi-state/). This component is very useful to build custom animations and transitions for your objects.

[Image: A Multi-state component inserted over the park map and selected, with the Multi-state section of its properties]

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

[Image: Inside the Multi-state, state 1 “closed” holds the full content: the All gardens button and its four garden items]

Select all your objects and [group using Ctrl+G or Cmd+G](https://docs.pandasuite.com/essentials/components/group/). Crop the group to only display the drop-down button. This first state represents the drop-down as **closed**.

[Video: in state 1 “closed”, the five objects are selected and grouped with Cmd + G, then the group is shortened to show only the button]

In the **States** list, click the arrow next to **+** and choose **Create a linked state**. In this second state, stretch the group to display the menu items. This second state represents the drop-down as **opened**: rename it **open**.

[Video: the arrow next to + creates a state linked to “closed”, then the group is stretched to reveal the four garden items]

Now you need to create the action to open drop-down menu. Go to state 1 and select the drop-down button. Click **Actions**, choose **Single tap/click** and the action **Interact with a component**. The Studio then offers an **Interactive Selection**: pick the Multi-state as target, choose **Select state** and the state **open**.

[Image: Action window of the Menu button in state 1: on Single tap/click, Select state takes Multi-state18029 to the “open” state in 0.4 s]

In state 2, the button already carries this action, because a linked state copies the actions of its objects. Select the button, click the action and choose the state **closed**: the link breaks for this action only, and the button now closes the drop-down menu.