Dropdown Menu

A Radix-based dropdown menu with glass-morphism content panel, keyboard navigation, and animated transitions.

Preview

Installation

npx shadcn@latest add @shadszn/dropdown-menu

Usage

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

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost">Options</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>Actions</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Edit</DropdownMenuItem>
        <DropdownMenuItem>Duplicate</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem className="text-red-400">Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Subcomponents

Prop	Type	Default	Description
DropdownMenu	Root	---	Root component controlling open state.
DropdownMenuTrigger	Trigger	---	Element that opens the menu on click.
DropdownMenuContent	Content	---	The floating menu panel.
DropdownMenuItem	Item	---	A clickable menu item.
DropdownMenuLabel	Label	---	A non-interactive group heading.
DropdownMenuSeparator	Separator	---	A visual divider between items.
DropdownMenuGroup	Group	---	Groups related menu items together.