Dropdown

Deprecated

Menu attached to a trigger. Renders items with role='menuitem'. Closes on Escape, click outside, item select. Keyboard arrow navigation. Prefer the Menu molecule for new popover menus; Dropdown's legacy native-select API (options/value/onChange) is DEPRECATED (Wave 3 Tier-1, L6-M3) — use Menu for action menus or the Select atom for form selects. Superseded by menu.

Categorymolecules

Sourcepatterns/molecules/dropdown.html

AI HintUse for grouped UI patterns. Combine atoms into functional units.

Catalog fallback

Live MDX preview not available for Dropdown. Showing component catalog metadata instead.

Props

Prop

Type

Required

Default

Description

trigger

React.ReactElement

Required

—

Element that opens the menu — gets aria-haspopup='menu' + aria-expanded

items

DropdownItem[]

Required

—

2-8 items

options

DropdownItem[]

Required

—

Synced from source — no interface JSDoc yet; document on `Dropdown.tsx`.

value

string

Optional

''

Current value.

onChange

(value: string) => void

Optional

—

Called when the value changes.

placeholder

string

Optional

'Select...'

Placeholder text shown when the value is empty.

disabled

boolean

Optional

—

Disables the control.

ariaLabel

string

Optional

—

Synced from source — no interface JSDoc yet; document on `Dropdown.tsx`.

placement

never

Optional

'bottom'

Positioning preset.

align

never

Optional

'start'

Alignment preset.

open

never

Optional

—

Whether the element is open/expanded.

onOpenChange

never

Optional

—

Synced from source — no interface JSDoc yet; document on `Dropdown.tsx`.

Quick use:<Dropdown />

Accessibility

ARIA rolemenu

Usage

Import

tsxSnippet

import { Dropdown } from "@epasslive/design-system"

Example 1

Example 2

tsxSnippet

<Dropdown variant="default" />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules