Dropdown Menu

Displays a menu to the user triggered by a button.

Installation

bash
npx shadcn@latest add dropdown-menu

Import

import {  DropdownMenu,  DropdownMenuTrigger,  DropdownMenuContent,  DropdownMenuItem,  DropdownMenuCheckboxItem,  DropdownMenuRadioItem,  DropdownMenuLabel,  DropdownMenuSeparator,  DropdownMenuShortcut,  DropdownMenuGroup,  DropdownMenuSub,  DropdownMenuSubContent,  DropdownMenuSubTrigger,  DropdownMenuRadioGroup,} from "@/components/ui/dropdown-menu"

Basic

With shortcuts

Props

DropdownMenu

PROPTYPEDEFAULTDESCRIPTION
openboolean—Controlled open state
onOpenChange(open: boolean) => void—Called when open state changes
modalbooleantrueWhether to render as a modal

DropdownMenuContent

PROPTYPEDEFAULTDESCRIPTION
align"start" | "center" | "end""center"Alignment relative to trigger
sidestring—Preferred side of the trigger
sideOffsetnumber—Offset from the trigger
loopbooleanfalseWhether keyboard navigation loops

DropdownMenuCheckboxItem

PROPTYPEDEFAULTDESCRIPTION
checkedboolean—Controlled checked state
onCheckedChange(checked: boolean) => void—Called when checked state changes

DropdownMenuRadioGroup

PROPTYPEDEFAULTDESCRIPTION
valuestring—Controlled selected value
onValueChange(val: string) => void—Called when value changes

Accessibility

  • Arrow keys navigate between items
  • Enter/Space selects an item
  • Escape closes the menu
  • Type-ahead jumps to matching item