Haedong
047

Context Menu

Overlay
Right-click here

last: —

Customize

Label

Code

<ContextMenu
  className="h-40 border border-border"
  menu={
    <ContextMenuContent>
      <ContextMenuLabel>File</ContextMenuLabel>
      <ContextMenuItem onSelect={rename}>Rename</ContextMenuItem>
      <ContextMenuItem onSelect={duplicate}>Duplicate</ContextMenuItem>
      <ContextMenuSeparator />
      <ContextMenuItem onSelect={remove}>Delete</ContextMenuItem>
    </ContextMenuContent>
  }
>
  Right-click here
</ContextMenu>

Install

npx shadcn@latest add https://components.haedong.dev/r/context-menu.json

Props

ContextMenu extends the native div props and is the area: right-click (or the ContextMenu / Shift+F10 keys when it has focus — give it tabIndex) opens the menu at the pointer; closing returns focus to it. Pass the menu as the menu prop: ContextMenuContent with ContextMenuItem (onSelect), ContextMenuLabel and ContextMenuSeparator — these are the Dropdown Menu's own parts, so everything about them is the same.

PropTypeDescription
menuReactNodeThe ContextMenuContent to open.
onOpenChange(open: boolean) => voidOpen and close.
childrenReactNodeThe area that listens for right-click.