Context Menu

Actions on right-click, scoped to what was clicked.

Default

Right click here

<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Rename</ContextMenuItem>
    <ContextMenuItem>Duplicate</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Full menu

Right click here

<ContextMenuContent>
  <ContextMenuGroup>
    <ContextMenuLabel>hello-world.md</ContextMenuLabel>
    <ContextMenuItem><PenLine /> Rename<ContextMenuShortcut>⌘R</ContextMenuShortcut></ContextMenuItem>
  </ContextMenuGroup>
  <ContextMenuCheckboxItem checked>Starred</ContextMenuCheckboxItem>
  <ContextMenuSub>
    <ContextMenuSubTrigger>Export as</ContextMenuSubTrigger>
    <ContextMenuSubContent>…</ContextMenuSubContent>
  </ContextMenuSub>
  <ContextMenuRadioGroup value={view} onValueChange={setView}>…</ContextMenuRadioGroup>
  <ContextMenuItem render={<a href="/design" />}>Open in browser</ContextMenuItem>
  <ContextMenuItem disabled>Publish (Studio only)</ContextMenuItem>
</ContextMenuContent>

One menu covering groups with labels, icon prefixes and shortcut suffixes, a submenu, checkbox and radio items, a link item (render={<a href />}), and a disabled item.

Markdown for agents: /design/context-menu.md · spec: /design.md