Dropdown Menu

Presents a list of contextual actions or options in a floating menu triggered by a button or icon.

Code

Installation

npx shadcn@latest add dropdown-menu

Basic Example

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

With Labels

<DropdownMenuContent>
  <DropdownMenuLabel>My Account</DropdownMenuLabel>
  <DropdownMenuSeparator />
  <DropdownMenuItem>Profile</DropdownMenuItem>
  <DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuContent>

Reference

Props

Prop	Type	Default	Description
open	boolean	—	Controlled open state
onOpenChange	function	—	Callback when open state changes
align	string	"start"	Alignment of menu. Options: start, center, end
disabled	boolean	false	Disable menu item

Disabled State

Usage Guidelines

When to Use

Use dropdown menus for contextual actions, settings, and navigation. They work well for user menus, action buttons, and options that don't need immediate visibility.

Dropdown menus are ideal when you have multiple related actions and want to save space in your interface. Use them for secondary actions and less frequent operations.

Best Practices

Group related items with separators
Use labels to organize menu sections
Disable items that aren't applicable rather than hiding them
Keep menu items concise and action-oriented
Use icons to improve visual recognition

Accessibility

Dropdown menus are fully keyboard accessible. Users can open with Enter or Space, navigate with arrow keys, and close with Escape. Disabled items are skipped during keyboard navigation.

Ensure menu items have clear, descriptive labels. Use icons to support the text but don't rely on them alone to convey meaning.

Rhetoric-ds