Dropdown provides toggleable and contextual overlays for presenting lists of links and other content. In Droip, a Dropdown is a nifty element that allows you to add 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 Components 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: Determine whether the dropdown content opens on Hover or Click.
• Animation: Define the animation that governs how the dropdown content enters the screen. This includes options like sliding from the left, fading in, or expanding from a smaller to a larger size.
• Easing: Easing refers to the rate of change of an animation’s speed. It controls the acceleration and deceleration of the animation, affecting its overall smoothness. Options typically include linear, ease-in, ease-out, and ease-in-out. Choose the easing function that best complements your animation’s style.
• Delay: Specify the duration before the animation commences, measured in seconds or milliseconds.
• Duration: Indicate the animation’s length.

Learn more about Animation & Interaction.

• State: Toggle the State to Show to render the Dropdown Target visible, and Hide to conceal it.

Styling the Dropdown

Once you’re done creating your dropdown you can add style customization using the Style Panel located at the ride side.