PlumUI

Context Menu

A menu that opens at the pointer on right click or long press. Same items and keyboard model as the dropdown.

OverlaysRadix Context Menu
Q4 planning.md — right click

Playground

Tweak the props, the preview and the code follow.

Right click here
Props
<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      <Pencil /> Rename <ContextMenuShortcut>F2</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      <Copy /> Duplicate <ContextMenuShortcut>⌘D</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Engineering</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive">
      <Trash2 /> Delete
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Installation

npx @plumsydev/plum-ui add context-menu

Usage

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Rename</ContextMenuItem>
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Examples

File browser

Right click a file to rename, duplicate, star or delete it — with undo.

deploy.ts
hero.png
roadmap.md
routes.ts
og-image.png

Canvas

Checkbox and radio items that drive a canvas: grid, rulers and zoom.

050100150200250300350400450500550
Right click the canvas

API Reference

ContextMenuTrigger

The area that listens for right click. Gets data-state=open while the menu is shown.

PropTypeDefault
disabled

Fall back to the native context menu.

booleanfalse

ContextMenuItem

PropTypeDefault
variant

Use destructive for dangerous actions.

"default" | "destructive""default"
inset

Indents the item to line up with checkbox items.

booleanfalse

Notes

  • Exports mirror the Dropdown Menu one-to-one: ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuSub, ContextMenuShortcut and friends.
PreviousCommandNextCopy Button