Open a menu of actions from a button

At a glanceCopy Anchor Link

• Who: Developers grouping a few actions behind one button.
• What: Action menu (trigger + items) with keyboard and axe coverage. Not a form select.
• Use when: For Duplicate, Archive, and similar verbs on one row or page.
• Avoid when: For choosing one form value — use Select. For a destructive confirm — use ConfirmDialog after the item is chosen.
• See also: Pick one option from a dropdown, Confirm destructive actions, Open modal dialogs

PreviewCopy Anchor Link

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 0.6.4 (via changesets).

ExampleCopy Anchor Link

import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@zedtech/zedkit-ui";
<DropdownMenu>
  <DropdownMenuTrigger asChild><Button variant="outline">Actions</Button></DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Duplicate invoice</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Archive invoice</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Wraps: @radix-ui/react-dropdown-menu