Dropdown
A menu component that displays a list of actions or options triggered by a button, providing a clean way to organize related commands.
Basic Dropdown
With Icons
With Labels and Grouping
Checkbox Items
Radio Items
Sub-menus
Disabled Items
Props
Dropdown (Convenience API)
| Name | Type | Default | Description |
|---|---|---|---|
trigger* | ReactNode | - | Trigger element (required) |
children | ReactNode | - | Dropdown menu content |
open | boolean | - | Controlled open state |
onOpenChange | (open: boolean) => void | - | Open state change handler |
DropdownItem
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'destructive' | 'default' | Visual style variant |
icon | ReactNode | - | Icon to display before text |
disabled | boolean | false | Whether item is disabled |
children | ReactNode | - | Item content |
Usage Guidelines
When to use
- •Display a list of related actions or options that don't need to be immediately visible
- •Group related commands that share a common theme (e.g., file operations, account settings)
- •Conserve screen space by hiding less frequently used actions
- •Provide context-specific actions for a particular element or section
Best practices
- •Keep menu items concise and clearly labeled
- •Use icons to enhance recognition and scannability
- •Group related items with labels and separators
- •Place destructive actions at the bottom with visual distinction
- •Limit menu depth to 2 levels to avoid complexity
- •Disable rather than hide unavailable options to maintain consistency
Accessibility
- •Implements ARIA menu pattern with proper roles (menu, menuitem)
- •Keyboard navigation with arrow keys, Enter/Space to select
- •Focus management with trapped focus within open menu
- •Escape key closes the menu and returns focus to trigger
- •Disabled items properly marked with aria-disabled
- •Sub-menus navigate with right/left arrow keys
Do's and Don'ts
✓ Do
- •Use clear, action-oriented labels
- •Group related items with separators
- •Place destructive actions at the bottom
- •Use icons to enhance scannability
✗ Don't
- •Use vague labels like "Options" or "More"
- •Mix destructive actions with regular items
- •Create deeply nested sub-menus (3+ levels)
- •Include too many items without grouping
Related Components
Button
Trigger element for dropdown menus
Menu
Alternative menu component for navigation
Popover
Display content in an overlay