Flowkit (Beta)Components

Dropdown

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