[ [UI.18] Navigation ] Dropdown Menu

Dropdown Menu

> Displays a menu to the user—such as a set of actions or functions—triggered by a button.

Import

[ [0x5B] IMPORT ]

1import {
2  DropdownMenu,
3  DropdownMenuTrigger,
4  DropdownMenuContent,
5  DropdownMenuItem,
6  DropdownMenuLabel,
7  DropdownMenuSeparator,
8} from "@/components/ui/dropdown-menu"

Preview

[ [0x00] DROPDOWN MENU ]

1import {
2  DropdownMenu,
3  DropdownMenuTrigger,
4  DropdownMenuContent,
5  DropdownMenuItem,
6  DropdownMenuLabel,
7  DropdownMenuSeparator,
8} from "@/components/ui/dropdown-menu";
9import { Button } from "@/components/ui/button";
10
11<DropdownMenu>
12  <DropdownMenuTrigger asChild>
13    <Button variant="outline">&gt; OPEN MENU</Button>
14  </DropdownMenuTrigger>
15  <DropdownMenuContent align="end" className="w-56">
16    <DropdownMenuLabel>My Account</DropdownMenuLabel>
17    <DropdownMenuSeparator />
18    <DropdownMenuItem className="font-semibold">
19      <User className="mr-2 h-4 w-4" />
20      Profile
21    </DropdownMenuItem>
22    <DropdownMenuItem className="font-semibold">
23      <Settings className="mr-2 h-4 w-4" />
24      Settings
25    </DropdownMenuItem>
26    <DropdownMenuSeparator />
27    <DropdownMenuItem className="text-destructive font-semibold">
28      <LogOut className="mr-2 h-4 w-4" />
29      Log out
30    </DropdownMenuItem>
31  </DropdownMenuContent>
32</DropdownMenu>

Variants

[ [0x00] WITH CHECKBOXES ]

1const [showStatusBar, setShowStatusBar] = useState(true);
2const [showActivityBar, setShowActivityBar] = useState(false);
3
4<DropdownMenu>
5  <DropdownMenuTrigger asChild>
6    <Button variant="outline">&gt; VIEW OPTIONS</Button>
7  </DropdownMenuTrigger>
8  <DropdownMenuContent className="w-56">
9    <DropdownMenuLabel>Appearance</DropdownMenuLabel>
10    <DropdownMenuSeparator />
11    <DropdownMenuCheckboxItem
12      checked={showStatusBar}
13      onCheckedChange={setShowStatusBar}
14    >
15      Status Bar
16    </DropdownMenuCheckboxItem>
17    <DropdownMenuCheckboxItem
18      checked={showActivityBar}
19      onCheckedChange={setShowActivityBar}
20    >
21      Activity Bar
22    </DropdownMenuCheckboxItem>
23  </DropdownMenuContent>
24</DropdownMenu>

[ [0x00] WITH RADIO GROUP ]

1const [position, setPosition] = useState("bottom");
2
3<DropdownMenu>
4  <DropdownMenuTrigger asChild>
5    <Button variant="outline">&gt; POSITION: {position}</Button>
6  </DropdownMenuTrigger>
7  <DropdownMenuContent className="w-56">
8    <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
9    <DropdownMenuSeparator />
10    <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
11      <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
12      <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
13      <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
14    </DropdownMenuRadioGroup>
15  </DropdownMenuContent>
16</DropdownMenu>

[ [0x00] WITH SUBMENU ]

1<DropdownMenu>
2  <DropdownMenuTrigger asChild>
3    <Button variant="outline">&gt; ACTIONS</Button>
4  </DropdownMenuTrigger>
5  <DropdownMenuContent className="w-56">
6    <DropdownMenuItem className="font-semibold">
7      <Mail className="mr-2 h-4 w-4" />
8      Email
9    </DropdownMenuItem>
10    <DropdownMenuItem className="font-semibold">
11      <MessageSquare className="mr-2 h-4 w-4" />
12      Message
13    </DropdownMenuItem>
14    <DropdownMenuSeparator />
15    <DropdownMenuSub>
16      <DropdownMenuSubTrigger className="font-semibold">
17        <UserPlus className="mr-2 h-4 w-4" />
18        Invite users
19      </DropdownMenuSubTrigger>
20      <DropdownMenuSubContent>
21        <DropdownMenuItem className="font-semibold">
22          <Mail className="mr-2 h-4 w-4" />
23          Email
24        </DropdownMenuItem>
25        <DropdownMenuItem className="font-semibold">
26          <MessageSquare className="mr-2 h-4 w-4" />
27          Message
28        </DropdownMenuItem>
29        <DropdownMenuSeparator />
30        <DropdownMenuItem className="font-semibold">
31          <PlusCircle className="mr-2 h-4 w-4" />
32          More...
33        </DropdownMenuItem>
34      </DropdownMenuSubContent>
35    </DropdownMenuSub>
36  </DropdownMenuContent>
37</DropdownMenu>

[ [0x00] WITH SHORTCUTS ]

1<DropdownMenu>
2  <DropdownMenuTrigger asChild>
3    <Button variant="outline">&gt; KEYBOARD SHORTCUTS</Button>
4  </DropdownMenuTrigger>
5  <DropdownMenuContent className="w-56">
6    <DropdownMenuLabel>Commands</DropdownMenuLabel>
7    <DropdownMenuSeparator />
8    <DropdownMenuItem className="font-semibold">
9      <User className="mr-2 h-4 w-4" />
10      Profile
11      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
12    </DropdownMenuItem>
13    <DropdownMenuItem className="font-semibold">
14      <Settings className="mr-2 h-4 w-4" />
15      Settings
16      <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
17    </DropdownMenuItem>
18    <DropdownMenuItem className="font-semibold">
19      <Keyboard className="mr-2 h-4 w-4" />
20      Keyboard shortcuts
21      <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
22    </DropdownMenuItem>
23  </DropdownMenuContent>
24</DropdownMenu>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
align	`"start" \| "center" \| "end"`	`"center"`	Horizontal alignment of the dropdown menu relative to the trigger. Use 'end' for right-aligned (table actions, navbar), 'start' for left-aligned (sidebar menus).
sideOffset	`number`	`4`	Distance in pixels between the trigger and the dropdown content
inset	`boolean`	`false`	Adds left padding for alignment with items that have indicators (checkboxes, radio buttons)
checked	`boolean`	-	For DropdownMenuCheckboxItem - the controlled checked state
onCheckedChange	`(checked: boolean) => void`	-	For DropdownMenuCheckboxItem - callback when checked state changes
value	`string`	-	For DropdownMenuRadioGroup - the value of the selected item
onValueChange	`(value: string) => void`	-	For DropdownMenuRadioGroup - callback when the selected value changes

Accessibility

[ [0x58] A11Y ]

Supports keyboard navigation with arrow keys
Can be opened and closed with Enter or Space when focused
Escape key closes the menu
Automatically manages focus when opening and closing
Supports typeahead - type to focus menu items
Screen readers announce menu state and selected items

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Dropdown Menu when:

• Actions menu with 3-7 related items (edit, delete, duplicate, share)
• User profile menu (account, settings, logout)
• Context menu triggered by click (more options, kebab menu)
• Settings or view preferences (checkboxes, radio groups)
• Quick actions attached to specific UI elements (row actions, card actions)

✗ Don't use when:

• Primary site navigation (use Navigation component or header nav)
• Less than 3 items (use individual Buttons instead)
• Complex forms or inputs needed (use Dialog or Popover)
• Content should always be visible (use Tabs or sections)
• More than 10 items (consider categorizing with separators or use Select)

Best Practices:

• Group related actions with DropdownMenuSeparator
• Place destructive actions (delete, remove) at the bottom after separator
• Use DropdownMenuLabel for section headers ("Account", "Settings")
• Add icons to menu items for quick recognition (edit icon, delete icon)
• Show keyboard shortcuts with DropdownMenuShortcut (⌘K, ⌘S)
• Use DropdownMenuCheckboxItem for toggleable options (show/hide features)
• Keep menu width consistent (w-56 is standard, adjust with className)