Context Menu

The same role="menu" primitives as Dropdown Menu,MenuItem and MenuSeparator are imported straight from there rather than reimplemented, only the trigger and positioning differ. Dropdown Menu opens from a popoverTarget button anchored with CSS anchor positioning; Context Menu opens on the browser's native contextmenu event (right-click, or long-press on touch), suppresses the OS's own context menu, and places itself at the cursor instead. That cursor position isn't a fixed anchor the platform understands, so this is popover="manual" instead of popover="auto": outside-click, scroll, and Escape dismissal are wired up by hand, the same way Combobox handles light-dismiss for its own popover="manual" listbox.

import { ContextMenu, MenuItem, MenuSeparator } from "@kernelui/react";

function FileRow() {
  return (
    <ContextMenu render={<div>Right-click here</div>}>
      <MenuItem onSelect={() => {}}>Copy</MenuItem>
      <MenuItem onSelect={() => {}}>Rename</MenuItem>
      <MenuSeparator />
      <MenuItem destructive onSelect={() => {}}>
        Delete
      </MenuItem>
    </ContextMenu>
  );
}

Props

Accessibility

Right-click opens the menu at the pointer, clamped so it never renders off-screen. Escape, selecting an item, an outside click, or scrolling the page all close it.

Worth being honest about: right-click is not a keyboard-reachable gesture. There's no equivalent of Dropdown Menu's focusable trigger button here, a keyboard-only or switch-control user has no way to open this menu at all. A real application should pair a context menu with a genuinely keyboard-accessible path to the same actions, a visible "more actions" button using Dropdown Menu, or listening for the keyboard's own context-menu key (Shift+F10 on Windows, the Menu key) alongside the contextmenu event, rather than relying on right-click as the only way in.