DropdownMenu

Composition preview

Try DropdownMenu alongside its related overlays & menus components. These examples keep all actions local.

Usage

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

<>
<DropdownMenu>
  <DropdownMenuTrigger asChild><Button variant="outline">Actions</Button></DropdownMenuTrigger>
  <DropdownMenuContent><DropdownMenuGroup>
    <DropdownMenuItem onSelect={handleEdit}>Edit</DropdownMenuItem>
  </DropdownMenuGroup></DropdownMenuContent>
</DropdownMenu>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

DropdownMenuTrigger, Content, Group, Item, CheckboxItem, RadioGroup, RadioItem, Separator

Usage & accessibility

Group items. Use onSelect for commands and disabled for unavailable commands. MenuSurface preserves an existing host's inline positioning and dismissal.

Implementation contract

src/components/ui/dropdown-menu.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.