Dropdown

molecules

Menu attached to a trigger. Renders items with role='menuitem'. Closes on Escape, click outside, item select. Keyboard arrow navigation.

ARIA Role: menu

Demo

Demo for Dropdown (molecules)

Menu attached to a trigger. Renders items with role='menuitem'. Closes on Escape, click outside, item select. Keyboard arrow navigation.

Props

Prop	Type	Required	Default	Description
`trigger`	`React.ReactElement`	Yes	`—`	Element that opens the menu — gets aria-haspopup='menu' + aria-expanded
`items`	`DropdownItem[]`	Yes	`—`	2-8 items

TypeScript Interface

interface DropdownProps<T> {
  trigger: React.ReactElement;
  items: { id: string; label: string; icon?: React.ReactNode; destructive?: boolean; onSelect: () => void }[];
  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
  align?: 'start' | 'end';
}

Assertions (NASA Rule 5)

[type]items bounded 2-8 (NASA Rule 2)(NASA Rule 2 + 5)
[aria]Trigger gets aria-haspopup='menu' + aria-expanded; menu has role='menu'(WCAG 4.1.2)

Usage

Import

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

Basic

<Dropdown />

With Variants

<Dropdown variant="primary" size="md" />