Dropdown Menu
A menu component that displays a list of actions or options when triggered. Supports checkboxes, radio groups, sub-menus, and keyboard shortcuts with full RTL support.
Preview
Installation
Usage
Examples
With Icons and Shortcuts
With Checkboxes
With Radio Group
With Sub Menus
Props
DropdownMenu
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled open state |
onOpenChange | (open: boolean) => void | undefined | Callback when open state changes |
This component is built on top of Radix UI's Dropdown Menu primitive. For a complete list of props for each sub-component, refer to the Radix UI documentation.
Accessibility
Keyboard Navigation
SpaceOpens/closes the menuEnterOpens the menu and activates the first item↓Moves focus to next menu item↑Moves focus to previous menu item→Opens sub menu←Closes sub menuEscCloses the menu
ARIA Attributes
Radix UI automatically handles all ARIA attributes including roles, aria-expanded, aria-haspopup, and focus management for optimal screen reader support.
Focus Management
When the menu opens, focus moves to the first menu item. When closed, focus returns to the trigger button. This creates a predictable and accessible user experience.
RTL Considerations
Dropdown menus automatically support RTL layout. Icons, shortcuts, and sub-menu indicators flip correctly using logical properties (ms-auto, ps-, pe-).