Dropdown Menu
Navigation
Overlay
Context menus with actions, checkboxes, and submenus.
Preview
Simple menu with actions
With Checkboxes
Menu items with checkbox states
With Submenu
Nested menu items
Props
Component API reference
DropdownMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
align | 'start' | 'center' | 'end' | 'center' | Alignment relative to trigger |
sideOffset | number | 4 | Distance from trigger |
className | string | — | Additional CSS classes |
DropdownMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Disable the item |
destructive | boolean | false | Destructive/danger styling |
onSelect | () => void | — | Selection callback |
DropdownMenuCheckboxItem
| Prop | Type | Default | Description |
|---|---|---|---|
checked* | boolean | — | Checked state |
onCheckedChange | (checked: boolean) => void | — | Change callback |
Usage
Import and implementation examples
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuCheckboxItem,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
} from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
// Basic dropdown
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>Open</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
// With checkbox items
<DropdownMenuCheckboxItem
checked={showStatusBar}
onCheckedChange={setShowStatusBar}
>
Status Bar
</DropdownMenuCheckboxItem>
// With submenu
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<UserPlus className="w-4 h-4" />
<span>Invite users</span>
</DropdownMenuSubTrigger>
<DropdownMenuSubContent>
<DropdownMenuItem>Email</DropdownMenuItem>
<DropdownMenuItem>Message</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>Features
Built-in functionality
- Keyboard navigation: Arrow keys, Enter, Escape support
- Checkbox items: Multi-select with checkboxes
- Nested submenus: Unlimited nesting depth
- Keyboard shortcuts: Display shortcut hints
- Destructive items: Special styling for danger actions
- Icons support: Add icons to menu items
- Labels & separators: Organize menu sections
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="menu" for contentrole="menuitem" for itemsaria-checked for checkbox itemsaria-haspopup for submenusKeyboard Navigation
| Key | Action |
|---|---|
| Arrow Down | Move to next item |
| Arrow Up | Move to previous item |
| Arrow Right | Open submenu |
| Arrow Left | Close submenu |
| Enter | Select item |
| Escape | Close menu |
Notes
- Focus is trapped within menu
- Clicking outside closes menu
- Screen reader announces menu items