Components
Menu
Opinionated action menu. Icons, shortcuts, and a destructive item on DropdownMenu.
Thin sugar on Dropdown menu. Same Radix root, fade-only
panel, and bg-fill focus wash. MenuItem adds icon, shortcut, and destructive
slots so you do not hand-compose those every time.
Use this for one-shot actions on an entity. Use DropdownMenu when you need checkboxes, radios, or full control of the item row.
Usage
import { PencilSimple, Trash } from '@phosphor-icons/react';
import { Button } from '@/components/ui/button';
import {
Menu,
MenuContent,
MenuItem,
MenuSeparator,
MenuTrigger,
} from '@/components/ui/menu';
<Menu>
<MenuTrigger asChild>
<Button variant="ghost" size="sm">
Actions
</Button>
</MenuTrigger>
<MenuContent>
<MenuItem icon={PencilSimple} shortcut="⌘E">
Edit
</MenuItem>
<MenuSeparator />
<MenuItem icon={Trash} destructive>
Delete
</MenuItem>
</MenuContent>
</Menu>icon is the same slot as Button.iconBefore (ComponentType, not a Phosphor-only
Icon type). Destructive items paint text-destructive and a destructive/10 focus
wash.
Install
shadcn add @gesso/menu