Dropdown Menu

Ready

Context menus with actions, checkboxes, and submenus

Basic Dropdown Menu

Simple menu with actions

With Checkboxes

Menu items with checkbox states

With Submenu

Nested menu items

Installation

npm install @radix-ui/react-dropdown-menu

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from '@/components/ui/dropdown-menu'

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button>Open</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Settings</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Features

  • Keyboard navigation - Arrow keys, Enter, Escape support
  • Checkboxes & radio items - Multi-select and single-select
  • Nested submenus - Unlimited nesting depth
  • Keyboard shortcuts - Display shortcut hints
  • Consistent styling - Matches Context Menu design