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
dropdown_list is-open_leftOpens list to the left
dropdown_list is-open_upOpens list above the toggle
dropdown_list is-open_up-leftOpens list above and to the left

Example: dropdown_list is-open_left