A dropdown lets you display toggle-able, contextual menus for showing lists of links or any other additional content. In Droip, you can use the Dropdown element to easily add clean, interactive dropdown menus anywhere on your page.

Adding a Dropdown

To add a Dropdown element, do the following:

1. Open the Elements panel.
2. Scroll down to the Advanced section.
3. Drag & drop the Dropdown element onto your canvas.

Configuring the Dropdown

The Dropdown element comprises two fundamental components: the Dropdown Trigger and the Dropdown Target.

Dropdown Trigger

The Dropdown Trigger serves as the interactive element that users engage with to activate or open the dropdown menu. Upon clicking or hovering over the Dropdown Trigger, the dropdown menu appears, showcasing available options for users to select.

By default, the Dropdown Trigger includes both text and an icon element. Nevertheless, you can add any preferred element as the dropdown trigger.

Dropdown Target

The Dropdown Target refers to the area or container responsible for containing the content of the open dropdown menu. This region showcases the list of choices or supplementary content after the Dropdown Trigger’s activation.

To access the Dropdown Target, configure the State option to Show within the Dropdown Settings, elaborated on in the next section.

Dropdown Settings

• Open On: Set whether the dropdown content will show on Hover or Click.
• Animation: Select the animation for when the dropdown content appears on the screen. Options include fade, flip, zoom, and more.
• Easing: Control the acceleration, deceleration, and overall smoothness of the animation with Easing. Options include linear, ease-in, ease-out, and ease-in-out. Choose the easing function that best complements your animation’s style.
• Delay: Set the duration before the animation commences, measured in seconds or milliseconds.
• Duration: Define the animation’s length.
• State: Toggle the State to Show to render the Dropdown Target visible, and Hide to conceal it.

Learn more about Animation & Interaction.

Styling the Dropdown

Once you’re done creating your dropdown you can add style customization using the Style Panel located on the right.