Action Menu

Actions

A compact menu of quick actions for a row, card, or header.

The action menu is built on the Base UI Menu primitive. It gives users one-click access to the most common operations on an item without leaving the page.

npx shadcn@latest add action-menu

Basic

Open the menu from a trigger button; click an item to close it.

Preview

Live

tsx

1<ActionMenu>
2  <ActionMenuTrigger render={<Button variant="outline">Actions</Button>} />
3  <ActionMenuContent className="w-40">
4    <ActionMenuItem>New tab</ActionMenuItem>
5    <ActionMenuItem>New window</ActionMenuItem>
6    <ActionMenuItem disabled>Incognito</ActionMenuItem>
7  </ActionMenuContent>
8</ActionMenu>

Icons & separators

Use labels, icons, and separators to group related actions.

Preview

Live

tsx

1<ActionMenu>
2  <ActionMenuTrigger render={<Button variant="outline">Edit</Button>} />
3  <ActionMenuContent className="w-44">
4    <ActionMenuLabel>File</ActionMenuLabel>
5    <ActionMenuItem>
6      <FileText />
7      Open
8    </ActionMenuItem>
9    <ActionMenuItem>
10      <Copy />
11      Duplicate
12    </ActionMenuItem>
13    <ActionMenuSeparator />
14    <ActionMenuItem>
15      <Trash2 className="text-red-500" />
16      Delete
17    </ActionMenuItem>
18  </ActionMenuContent>
19</ActionMenu>
20
21<ActionMenu>
22  <ActionMenuTrigger
23    render={<Button variant="ghost" size="icon" aria-label="Row actions"><MoreHorizontal /></Button>}
24  />
25  <ActionMenuContent className="w-40">
26    <ActionMenuItem>Rename</ActionMenuItem>
27    <ActionMenuItem>Duplicate</ActionMenuItem>
28    <ActionMenuItem disabled>Archive</ActionMenuItem>
29  </ActionMenuContent>
30</ActionMenu>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
open	boolean	Whether the menu is open. Pairs with onOpenChange.
defaultOpen	boolean= false	Whether the menu is open on first render.
disabled	boolean= false	Disables the trigger and every item in the menu.
sideOffset	number= 4	Distance in pixels between the trigger and the content popup.
render	React.ElementType	Renders the trigger as a different element or component.