Dropdown

A dropdown allows you to select an option from a list, making it ideal for conserving space and presenting multiple choices in a compact form.

Components of the Dropdown

A dropdown consists of two main parts:

• Trigger: This is the interactive part that, when clicked, toggles the visibility of the dropdown's contents. By default, it includes a button, but feel free to add multiple elements to customize your dropdown trigger.
• Dropdown Content: This is where the dropdown's content resides. By default, it starts with a list, but you can add various elements to suit your needs.

Configuring the Dropdown

The Dropdown comes with several handy properties to tailor it to your needs:

1. Trigger: This is what activates the dropdown. By default, it's set to click, but you can switch it up to hover or right click if you prefer.
2. Position: This determines where the dropdown content appears in relation to the trigger. You can choose from Top, Right, Bottom, or Left, with Bottom being the default.
3. Align: This controls how the content aligns itself—vertically if it's on the right or left, or horizontally if it's on the top or bottom.
4. Offset (x): Adjusts the horizontal spacing from the trigger element. You can use both positive and negative values here.
5. Offset (y): Adjusts the vertical spacing from the trigger element. Again, both positive and negative values are welcome.
6. Dropdown z-index: This property allows you to set the z-index for the dropdown, which determines its stacking order relative to other elements. A higher z-index value places the dropdown above elements with lower z-index values, making it useful for managing overlapping content.
7. Disabled: A simple toggle to enable or disable the dropdown.
8. Animated: Another toggle to turn on or off the animation when the dropdown opens.