Dropdown Menu

Displays a menu of actions or options triggered by a button.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/dropdown-menu.json

Usage

Use a dropdown menu for actions attached to a button or other click trigger. Built on Base UI Menu.

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

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuItem>Team</DropdownMenuItem>
        <DropdownMenuItem>Subscription</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Compose checkboxes, radio groups, submenus, separators, and shortcuts. Mark destructive actions with variant="destructive" on DropdownMenuItem.