Dropdown Menu
View on StorybookStorybookA 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.
Use Cases
Action menus (edit, delete, share)
User account menus
Context-sensitive operations
Overflow menus for limited space
Best Practices
Do
- ✓ Group related items with separators
- ✓ Use icons to improve scannability
- ✓ Show keyboard shortcuts alongside actions
Don't
- ✗ Don't nest menus more than one level deep
- ✗ Don't use for navigation — use proper nav links
- ✗ Don't include too many items (7±2 rule)