The DropdownMenu component displays a menu of actions or options that appears when triggered. Built on Radix UI primitives, it supports keyboard navigation, submenus, checkboxes, radio groups, and keyboard shortcuts.
Basic Usage
Menu with Icons and Labels
Properties
| Property | Type | Description |
|---|
open | boolean | The controlled open state of the dropdown menu. |
defaultOpen | boolean | The open state when initially rendered. |
onOpenChange | (open: boolean) => void | Event handler called when the open state changes. |
modal | boolean | The modality of the dropdown menu. Default: true. |
| Property | Type | Description |
|---|
asChild | boolean | Change the default rendered element for the one passed as a child. |
children | React.ReactNode | The element that will trigger the dropdown menu. |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for custom styling. |
sideOffset | number | The distance in pixels from the trigger. Default: 4. |
align | "start" | "center" | "end" | The preferred alignment against the trigger. |
side | "top" | "right" | "bottom" | "left" | The preferred side of the trigger to render against. |
| Property | Type | Description |
|---|
inset | boolean | Whether the item should have an inset appearance. |
disabled | boolean | Whether the item is disabled. |
onSelect | (event: Event) => void | Event handler called when the item is selected. |
className | string | Additional CSS classes for custom styling. |
| Property | Type | Description |
|---|
checked | boolean | "indeterminate" | The controlled checked state of the item. |
onCheckedChange | (checked: boolean) => void | Event handler called when the checked state changes. |
disabled | boolean | Whether the item is disabled. |
className | string | Additional CSS classes for custom styling. |
| Property | Type | Description |
|---|
value | string | The controlled value of the radio group. |
onValueChange | (value: string) => void | Event handler called when the value changes. |
| Property | Type | Description |
|---|
value | string | The unique value of the item. |
disabled | boolean | Whether the item is disabled. |
className | string | Additional CSS classes for custom styling. |
| Property | Type | Description |
|---|
inset | boolean | Whether the label should have an inset appearance. |
className | string | Additional CSS classes for custom styling. |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for custom styling. |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for custom styling. |
children | React.ReactNode | The shortcut text (e.g., "⌘K"). |
Accessibility
The DropdownMenu component includes comprehensive accessibility features:
- Keyboard Navigation - Arrow keys, Enter, Escape, and Tab support
- Focus Management - Proper focus handling and restoration
- Screen Reader Support - ARIA attributes and roles for assistive technologies
- Type-ahead - Users can type to navigate to menu items
- Roving Tabindex - Only one menu item is tabbable at a time
Common Use Cases
The DropdownMenu component is perfect for:
- Context Menus - Right-click or action menus for items
- Navigation Menus - User account menus, settings, help
- Action Menus - File operations, editing actions, bulk operations
- Filter Menus - View options, sorting, filtering controls
- Settings Panels - Theme selection, preferences, configurations
- Quick Actions - Frequently used commands and shortcuts
Best Practices
- Logical Grouping - Group related items together with separators
- Clear Labels - Use descriptive text that clearly indicates the action
- Consistent Icons - Use icons consistently throughout the menu
- Keyboard Shortcuts - Include shortcuts for frequently used actions
- Appropriate Width - Set reasonable width to accommodate content
- Loading States - Show loading indicators for async operations
- Error Handling - Disable items that aren't currently available
- Mobile Considerations - Ensure touch targets are appropriately sized