> This page is for Flowkit CSS Framework, version v1.
> 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                      |
| --------------------- | -------------------------------- |
| Open Left Dropdown    | Opens list to the left           |
| Open Up Dropdown      | Opens list above the toggle      |
| Open Up Left Dropdown | Opens list above and to the left |

Example: Dropdown List Open Left Dropdown