Dropdown Menu

PreviousNext

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

Component dropdown-menu-demo not found in registry.

Installation

pnpm dlx shadcn@latest add dropdown-menu

Usage

import { ChevronRight, Settings, User } from "lucide-react"
 
import * as Button from "@/registry/radix-ui/ui/button"
import * as DropdownMenu from "@/registry/radix-ui/ui/dropdown-menu"
 
export default function DropdownMenuExample() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <Button.Root variant="outline">
          Open Menu
          <ChevronRight className="ml-2 h-4 w-4" />
        </Button.Root>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>
          <User className="mr-2 h-4 w-4" />
          <span>Profile</span>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          <Settings className="mr-2 h-4 w-4" />
          <span>Settings</span>
        </DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>
          <span>Log out</span>
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  )
}

Features

  • Icon support: Built-in icon component with proper styling
  • Grouping: Organize items with labels and separators
  • Submenus: Nested dropdown menus with smooth animations
  • Checkboxes: Interactive checkbox items
  • Radio groups: Radio button selection within menus
  • Keyboard navigation: Full keyboard accessibility
  • Animations: Smooth enter/exit animations
  • Positioning: Automatic positioning with collision detection

Examples

Examples

Basic Dropdown

Component dropdown-menu-basic not found in registry.

With Groups

Component dropdown-menu-groups not found in registry.

With Submenu

Component dropdown-menu-submenu not found in registry.

With Shortcuts

Component dropdown-menu-shortcuts not found in registry.

With Checkboxes

Component dropdown-menu-checkboxes not found in registry.

Prevent Close on Select

Component dropdown-menu-prevent-close not found in registry.

Accessibility

The dropdown menu component is built with accessibility in mind:

  • Keyboard navigation: Full keyboard support with arrow keys, Enter, and Escape
  • ARIA attributes: Proper ARIA labels, roles, and states
  • Focus management: Automatic focus handling and restoration
  • Screen reader support: Semantic HTML and proper labeling
  • High contrast: Meets WCAG guidelines for color contrast

Examples

User Account Menu

import { CreditCard, LogOut, Settings, User } from "lucide-react"
 
import * as Button from "@/registry/radix-ui/ui/button"
import * as DropdownMenu from "@/registry/radix-ui/ui/dropdown-menu"
 
export function UserAccountMenu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <Button.Root variant="outline">
          <User className="mr-2 h-4 w-4" />
          Account
        </Button.Root>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>
          <User className="mr-2 h-4 w-4" />
          <span>Profile</span>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          <CreditCard className="mr-2 h-4 w-4" />
          <span>Billing</span>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          <Settings className="mr-2 h-4 w-4" />
          <span>Settings</span>
        </DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>
          <LogOut className="mr-2 h-4 w-4" />
          <span>Log out</span>
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  )
}

File Actions Menu

import { Archive, Copy, Edit, MoreHorizontal, Trash2 } from "lucide-react"
 
import * as Button from "@/registry/radix-ui/ui/button"
import * as DropdownMenu from "@/registry/radix-ui/ui/dropdown-menu"
 
export function FileActionsMenu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <Button.Root variant="outline" size="icon">
          <MoreHorizontal className="h-4 w-4" />
        </Button.Root>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>
          <Edit className="mr-2 h-4 w-4" />
          <span>Edit</span>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          <Copy className="mr-2 h-4 w-4" />
          <span>Duplicate</span>
        </DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>
          <Archive className="mr-2 h-4 w-4" />
          <span>Archive</span>
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          <Trash2 className="mr-2 h-4 w-4" />
          <span>Delete</span>
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  )
}

Settings Menu

import { Monitor, Moon, Settings, Sun } from "lucide-react"
 
import * as Button from "@/registry/radix-ui/ui/button"
import * as DropdownMenu from "@/registry/radix-ui/ui/dropdown-menu"
 
export function SettingsMenu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <Button.Root variant="outline">
          <Settings className="mr-2 h-4 w-4" />
          Settings
        </Button.Root>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Label>Appearance</DropdownMenu.Label>
        <DropdownMenu.RadioGroup value="system">
          <DropdownMenu.RadioItem value="light">
            <Sun className="mr-2 h-4 w-4" />
            <span>Light</span>
          </DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="dark">
            <Moon className="mr-2 h-4 w-4" />
            <span>Dark</span>
          </DropdownMenu.RadioItem>
          <DropdownMenu.RadioItem value="system">
            <Monitor className="mr-2 h-4 w-4" />
            <span>System</span>
          </DropdownMenu.RadioItem>
        </DropdownMenu.RadioGroup>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  )
}