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:

Property Name	Description
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.
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.
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.
Offset (x)	Adjusts the horizontal spacing from the trigger element. You can use both positive and negative values here.
Offset (y)	Adjusts the vertical spacing from the trigger element. Again, both positive and negative values are welcome.
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.
Disabled	A simple toggle to enable or disable the dropdown.
Animated	Another toggle to turn on or off the animation when the dropdown opens.