DropdownMenüs

DropdownMenüs are a user interface control that presents a list of options hidden by default and revealed when the control is activated. They are used in websites, software, and mobile apps to conserve space while offering multiple actions. They differ from native HTML select elements by allowing custom styling and more flexible behavior.

Activation can be via mouse click or touch, or keyboard input. The common pattern is a trigger element (button or link) with an aria-expanded state that controls the visibility of a menu list. Menu items have distinct actions and can be separated by dividers; submenus may appear for nested options. On selection, the menu closes and the chosen action is performed.

Accessibility and semantics: Use roles such as role="menu" and role="menuitem" or aria-labels, ensure focus remains visible, and provide keyboard navigation: ArrowDown/ArrowUp to move, Home/End jumps to ends, Enter/Space to activate, Escape to close. Implement focus trapping when open and close on outside click.

Implementation notes: In web environments, a typical pattern uses a button with aria-haspopup and aria-expanded controlling a hidden unordered list with role menu. CSS handles presentation; JavaScript toggles visibility and manages focus. Provide a graceful fallback for non-JS environments if necessary.

Variations and usage: Simple dropdown attached to a control, split or mega menus, and context-specific menus. Best practices include clear labeling, consistent activation method, appropriate contrast, and avoiding auto-opening on hover for accessibility concerns. Related concepts include navigation menus and contextual menus.