Skip to content

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.

dropdown

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:

dropdown-properties

Property NameDescription
TriggerThis 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.
PositionThis 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.
AlignThis 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-indexThis 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.
DisabledA simple toggle to enable or disable the dropdown.
AnimatedAnother toggle to turn on or off the animation when the dropdown opens.