Dropdown Menu

Component 28

About

A versatile dropdown menu component with animations, multiple variants, and full accessibility support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dropdown Menu to your project and fits it to your theme.

Code

How Dropdown Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuGroup,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import {
  User,
  CreditCard,
  Settings,
  Keyboard,
  Users,
  UserPlus,
  Mail,
  MessageSquare,
  PlusCircle,
  Plus,
  Github,
  LifeBuoy,
  Cloud,
  LogOut
} from "lucide-react";

export default function DemoOne() {
  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline">Open Menu</Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="w-56">
          <DropdownMenuLabel icon={User}>My Account</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem icon={User} shortcut="⇧⌘P">
              Profile
            </DropdownMenuItem>
            <DropdownMenuItem icon={CreditCard} shortcut="⌘B">
              Billing
            </DropdownMenuItem>
            <DropdownMenuItem icon={Settings} shortcut="⌘S">
              Settings
            </DropdownMenuItem>
            <DropdownMenuItem icon={Keyboard} shortcut="⌘K">
              Keyboard shortcuts
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuGroup>
            <DropdownMenuItem icon={Users}>Team</DropdownMenuItem>
            <DropdownMenuSub>
              <DropdownMenuSubTrigger icon={UserPlus}>
                Invite users
              </DropdownMenuSubTrigger>
              <DropdownMenuSubContent>
                <DropdownMenuItem icon={Mail}>Email</DropdownMenuItem>
                <DropdownMenuItem icon={MessageSquare}>Message</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem icon={PlusCircle}>More...</DropdownMenuItem>
              </DropdownMenuSubContent>
            </DropdownMenuSub>
            <DropdownMenuItem icon={Plus} shortcut="⌘+T">
              New Team
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem icon={Github}>GitHub</DropdownMenuItem>
          <DropdownMenuItem icon={LifeBuoy}>Support</DropdownMenuItem>
          <DropdownMenuItem disabled icon={Cloud}>
            API
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem icon={LogOut} variant="destructive" shortcut="⇧⌘Q">
            Log out
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </>
  )
}