Components
Dropdown Menu
Contextual action menu triggered from a button.
The DropdownMenu primitive wraps Radix DropdownMenu — a menu of actions
anchored to a trigger. It ships items, checkbox and radio items, labels,
separators, keyboard-shortcut hints, and nested submenus.
Preview
import { Button } from '@web/components/ui/button';import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger,} from '@web/components/ui/dropdown-menu';export default function DropdownMenuDemo() { return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline">Account</Button> </DropdownMenuTrigger> <DropdownMenuContent align="start" className="w-48"> <DropdownMenuLabel>My account</DropdownMenuLabel> <DropdownMenuSeparator /> <DropdownMenuItem> Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut> </DropdownMenuItem> <DropdownMenuItem>Settings</DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuItem variant="destructive">Sign out</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> );}Import
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";Props
DropdownMenuItem accepts every Radix DropdownMenu.Item prop plus inset
(reserve leading space to align with checkbox/radio items) and variant
("default" | "destructive"). The table is generated at build time from the
real DropdownMenuItemProps type in the apps/web source.