ContextMenu
Overlays

ContextMenu

ContextMenuArea intercepts right-click events; ContextMenu renders the menu content.

Preview

Right-click anywhere in this box
ContextMenuArea

ContextMenu is the menu shell itself. ContextMenuArea wraps your items in one automatically, but you can render it directly inside a DropdownMenu or a custom popover:

ContextMenu

ContextMenuArea

ContextMenuArea wraps any content with a native right-click context menu. The browser's own menu is suppressed, and the menu opens positioned at the cursor via the same Popover used by DropdownMenu.

ImportTSX
import { ContextMenuArea, MenuItem, MenuDivider } from "@solarius/onset";
import { IconCopy, IconTrash, IconPencil } from "@tabler/icons-react";

<ContextMenuArea
  menu={
    <>
      <MenuItem icon={<IconPencil size={14} />} onClick={handleRename}>
        Rename
      </MenuItem>
      <MenuItem icon={<IconCopy size={14} />} onClick={handleDuplicate}>
        Duplicate
      </MenuItem>
      <MenuDivider />
      <MenuItem icon={<IconTrash size={14} />} danger onClick={handleDelete}>
        Delete
      </MenuItem>
    </>
  }
>
  <div
    style={{
      padding: 40,
      border: "1px dashed var(--m-color-border)",
      borderRadius: 8,
      textAlign: "center",
    }}
  >
    Right-click anywhere in this area
  </div>
</ContextMenuArea>;

Props

ContextMenuArea props:

PropTypeDescription
childrenReactNodeContent that responds to right-click
menuReactNodeRequired menu content, composed from MenuItem
className, styleHTML attributesApplied to the wrapper div
disabledbooleanPrevents the context menu from opening

Disabled

ContextMenuArea disabledTSX
<ContextMenuArea menu={/* ... */} disabled>
  Right-clicking here does nothing
</ContextMenuArea>

ContextMenu

ContextMenu is the styled menu shell: a div with role="menu". It is used internally by both DropdownMenu and ContextMenuArea, but can be used directly for static menus.

Standalone ContextMenuTSX
import { ContextMenu, MenuItem, MenuDivider } from "@solarius/onset";

<ContextMenu>
  <MenuItem icon={<IconCopy size={14} />} onClick={handleCopy}>
    Copy
  </MenuItem>
  <MenuDivider />
  <MenuItem danger onClick={handleDelete}>
    Delete
  </MenuItem>
</ContextMenu>;