Skip to content

Dropdown Menu

Actions behind a button: a row's More menu, an account menu. An item ending in “…” opens something that asks for more.

Sourcecomponents/dropdown-menu.tsx

Usage

Dropdown Menu usage
import { MoreHorizontal } from "lucide-react";import { Button } from "@/components/button";import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/dropdown-menu";
export function DropdownMenuUsage({ edit, askToDelete }: { edit: () => void; askToDelete: () => void }) {  return (    <DropdownMenu>      <DropdownMenuTrigger render={<Button variant="ghost" size="icon" aria-label="More actions" />}>        <MoreHorizontal />      </DropdownMenuTrigger>      <DropdownMenuContent>        <DropdownMenuItem onClick={edit}>Edit</DropdownMenuItem>        <DropdownMenuSeparator />        <DropdownMenuItem variant="destructive" onClick={askToDelete}>          Delete…        </DropdownMenuItem>      </DropdownMenuContent>    </DropdownMenu>  );}

When to use

Use when

Actions behind a button: a row's More (⋯) menu, an account menu. End an item with "…" when it opens a Dialog or Alert Dialog

Don’t use when

Choosing a form value (use Select or Radio Group); app-wide File / Edit / View (use Menubar)