> This page is for Flowkit CSS Framework, version v2 (default).
> For other versions, use one of these documentation indexes:
> - v2 (default): https://developers.webflow.com/flowkit/v2.0.0/llms.txt
> - v1: https://developers.webflow.com/flowkit/v1.0.0/llms.txt

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Dropdown

> Dropdowns are menus that display a list of options when triggered.

## 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

| Class            | Purpose                                      |
| ---------------- | -------------------------------------------- |
| dropdown\_toggle | Interactive button that reveals the dropdown |
| dropdown\_list   | Container 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 Class                  | Description                      |
| ------------------------------- | -------------------------------- |
| dropdown\_list is-open\_left    | Opens list to the left           |
| dropdown\_list is-open\_up      | Opens list above the toggle      |
| dropdown\_list is-open\_up-left | Opens list above and to the left |

Example: dropdown\_list is-open\_left