For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Resources
Get started
ReferenceChangelog
ReferenceChangelog
  • Flowkit (Beta)
      • Cards
      • Buttons
      • Tag
      • Dropdown
      • Accordion
      • Images
      • Rich Text
      • Forms
      • Tabs
      • Slider
      • Divider
    • Utility Classes
LogoLogo
Resources
Get started
On this page
  • Class Naming
  • Elements
  • Direction Modifiers
Flowkit (Beta)Components

Dropdown

Was this page helpful?
Previous

Accordion

Next
Built with

Class Naming

The dropdown component is used to display a list of options that appear on interaction. It uses a base wrapper class and internal toggle/list elements to manage behavior and style.

The base class is Dropdown. This class wraps the entire dropdown structure and controls visibility of the dropdown list.

Elements

ClassPurpose
Dropdown ToggleInteractive button that reveals the dropdown
Dropdown ListContainer for the list of options

Direction Modifiers

Dropdowns support directional modifiers that control where the dropdown list appears in relation to the toggle button.

Combine these with Dropdown List to control layout.

Modifier ClassDescription
Open Left DropdownOpens list to the left
Open Up DropdownOpens list above the toggle
Open Up Left DropdownOpens list above and to the left

Example: Dropdown List Open Left Dropdown