Dropdowm Menu

Component 548

About

Dropdown menu component with framer motion and tailwind css.

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

Code

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

Usage.tsx

import { DropdownMenu } from "@/components/ui/dropdown-menu"
import { Pencil, Trash, Copy } from "lucide-react"

const DropdownMenuDemo = () => {
  return (
    <DropdownMenu
      options={[
        {
          label: "Edit",
          onClick: () => console.log("Edit"),
          Icon: <Pencil className="h-4 w-4" />,
        },
        {
          label: "Duplicate",
          onClick: () => console.log("Duplicate"),
          Icon: <Copy className="h-4 w-4" />,
        },
        {
          label: "Delete",
          onClick: () => console.log("Delete"),
          Icon: <Trash className="h-4 w-4" />,
        },
      ]}
    >
      Options
    </DropdownMenu>
  );
};

export { DropdownMenuDemo }