Dropdown Menu

Animated Dropdown Reveals a menu of options or actions when activated by a button.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/dropdown-menu.json 

Usage

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

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Changelog

30-01-2026, Visual Updates and Mobile Fixes

• Updated color system: Light mode uses #ffffff background with #f5f5f5 hover, dark mode uses #262626 background with #404040 hover.
• Added animate prop to DropdownMenu component (default: true) to control all animations globally.
• Fixed critical mobile bug where dropdown would auto-close immediately after opening on touch devices.
• Added touchAction: "manipulation" to all interactive components to prevent tap delays and improve mobile responsiveness.

API Reference

Dropdown Menu

The Dropdown Menu component displays a clickable trigger that reveals a list of selectable menu items.

Props