Context Menu

Actions

A menu that opens on right-click or long press over a target.

The context menu appears at the pointer when you right-click (or long-press) its trigger. The trigger is a bordered box that renders your children, making it easy to wrap any region of the page.

npx shadcn@latest add context-menu

Basic

Right-click the dashed box to open the menu.

Preview

Live

Right-click anywhere in this box

tsx

1<ContextMenu>
2  <ContextMenuTrigger>Right-click anywhere in this box</ContextMenuTrigger>
3  <ContextMenuContent className="w-48">
4    <ContextMenuItem>New file</ContextMenuItem>
5    <ContextMenuItem>New folder</ContextMenuItem>
6    <ContextMenuSeparator />
7    <ContextMenuItem>Rename</ContextMenuItem>
8    <ContextMenuItem>Duplicate</ContextMenuItem>
9  </ContextMenuContent>
10</ContextMenu>

With icons

Add icons and a label to make actions scannable.

Preview

Live

Right-click this panel for actions

tsx

1<ContextMenu>
2  <ContextMenuTrigger>Right-click this panel for actions</ContextMenuTrigger>
3  <ContextMenuContent className="w-48">
4    <ContextMenuLabel>Actions</ContextMenuLabel>
5    <ContextMenuItem>
6      <Copy />
7      Copy
8    </ContextMenuItem>
9    <ContextMenuItem>
10      <Share2 />
11      Share
12    </ContextMenuItem>
13    <ContextMenuSeparator />
14    <ContextMenuItem>
15      <Eye />
16      Preview
17    </ContextMenuItem>
18  </ContextMenuContent>
19</ContextMenu>

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 context menu is open.
defaultOpen	boolean= false	Whether the context menu is open on first render.
sideOffset	number= 4	Distance in pixels between the pointer and the popup.
className	string	Classes applied to the ContextMenuTrigger box.
render	React.ElementType	Renders the trigger as a different element or component.