Context Menu | agentic-ui docs

A menu that appears at the pointer on right-click or long press.

Basic

Right-click the target area to open. Supports disabled items and keyboard shortcuts.

Right click here

import { ContextMenu } from "@brijbyte/agentic-ui/context-menu";
import "@brijbyte/agentic-ui/context-menu.css";

export default function BasicDemo() {
  return (
    <ContextMenu
      items={[
        { label: "Back" },
        { label: "Forward", disabled: true },
        { label: "Reload" },
        { type: "separator" },
        { label: "Save As…", shortcut: "⌘S" },
        { label: "Print…", shortcut: "⌘P" },
        { type: "separator" },
        { label: "View Page Source", shortcut: "⌘U" },
        { label: "Inspect", shortcut: "⌥⌘I" },
      ]}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: 140,
          width: 280,
          borderRadius: "var(--radius-lg)",
          border: "1px dashed var(--color-line)",
          color: "var(--color-tertiary)",
          fontFamily: "var(--font-mono)",
          fontSize: "var(--font-size-sm)",
          userSelect: "none",
        }}
      >
        Right click here
      </div>
    </ContextMenu>
  );
}

Grouped

Use the group type to organise items into logical sections separated by dividers.

Right click here

import { ContextMenu } from "@brijbyte/agentic-ui/context-menu";
import "@brijbyte/agentic-ui/context-menu.css";

export default function GroupedDemo() {
  return (
    <ContextMenu
      items={[
        {
          type: "group",
          items: [
            { label: "Cut", shortcut: "⌘X" },
            { label: "Copy", shortcut: "⌘C" },
            { label: "Paste", shortcut: "⌘V", disabled: true },
          ],
        },
        { type: "separator" },
        {
          type: "group",
          items: [{ label: "Select All", shortcut: "⌘A" }],
        },
        { type: "separator" },
        {
          type: "group",
          items: [{ label: "Spelling and Grammar" }, { label: "Substitutions" }, { label: "Transformations" }],
        },
      ]}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: 140,
          width: 280,
          borderRadius: "var(--radius-lg)",
          border: "1px dashed var(--color-line)",
          color: "var(--color-tertiary)",
          fontFamily: "var(--font-mono)",
          fontSize: "var(--font-size-sm)",
          userSelect: "none",
        }}
      >
        Right click here
      </div>
    </ContextMenu>
  );
}

Nested

Use ContextMenuSubmenuTrigger inside a ContextMenu.SubmenuRoot to create submenus.

Right click here

import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
import { ContextMenuPopup, ContextMenuItem, ContextMenuSeparator, ContextMenuSubmenuTrigger } from "@brijbyte/agentic-ui/context-menu";
import "@brijbyte/agentic-ui/context-menu.css";

const triggerStyle: React.CSSProperties = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  height: 140,
  width: 280,
  borderRadius: "var(--radius-lg)",
  border: "1px dashed var(--color-line)",
  color: "var(--color-tertiary)",
  fontFamily: "var(--font-mono)",
  fontSize: "var(--font-size-sm)",
  userSelect: "none",
  cursor: "default",
};

export default function NestedDemo() {
  return (
    <BaseContextMenu.Root>
      <BaseContextMenu.Trigger render={<div style={triggerStyle}>Right click here</div>} />
      <BaseContextMenu.Portal>
        <BaseContextMenu.Positioner style={{ outline: "none", zIndex: 100 }}>
          <ContextMenuPopup>
            <ContextMenuItem>New File</ContextMenuItem>
            <ContextMenuItem>New Folder</ContextMenuItem>
            <ContextMenuSeparator />

            {/* Submenu */}
            <BaseContextMenu.SubmenuRoot>
              <ContextMenuSubmenuTrigger>Open With</ContextMenuSubmenuTrigger>
              <BaseContextMenu.Portal>
                <BaseContextMenu.Positioner style={{ outline: "none", zIndex: 101 }} alignOffset={-4} sideOffset={-4}>
                  <ContextMenuPopup>
                    <ContextMenuItem>VS Code</ContextMenuItem>
                    <ContextMenuItem>Zed</ContextMenuItem>
                    <ContextMenuItem>Vim</ContextMenuItem>
                    <ContextMenuSeparator />
                    <ContextMenuItem>Other…</ContextMenuItem>
                  </ContextMenuPopup>
                </BaseContextMenu.Positioner>
              </BaseContextMenu.Portal>
            </BaseContextMenu.SubmenuRoot>

            <ContextMenuSeparator />
            <ContextMenuItem>Get Info</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem>Move to Trash</ContextMenuItem>
          </ContextMenuPopup>
        </BaseContextMenu.Positioner>
      </BaseContextMenu.Portal>
    </BaseContextMenu.Root>
  );
}

Composed

Use raw @base-ui/react ContextMenu with styled parts for full layout control.

Right click here

import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
import { ContextMenuPopup, ContextMenuItem, ContextMenuSeparator } from "@brijbyte/agentic-ui/context-menu";
import "@brijbyte/agentic-ui/context-menu.css";

export default function ComposedDemo() {
  return (
    <BaseContextMenu.Root>
      <BaseContextMenu.Trigger
        render={
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              height: 140,
              width: 280,
              borderRadius: "var(--radius-lg)",
              border: "1px dashed var(--color-line)",
              color: "var(--color-tertiary)",
              fontFamily: "var(--font-mono)",
              fontSize: "var(--font-size-sm)",
              userSelect: "none",
              cursor: "default",
            }}
          >
            Right click here
          </div>
        }
      />
      <BaseContextMenu.Portal>
        <BaseContextMenu.Positioner style={{ outline: "none", zIndex: 100 }}>
          <ContextMenuPopup>
            <ContextMenuItem>New File</ContextMenuItem>
            <ContextMenuItem>New Folder</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem>Get Info</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem>Move to Trash</ContextMenuItem>
          </ContextMenuPopup>
        </BaseContextMenu.Positioner>
      </BaseContextMenu.Portal>
    </BaseContextMenu.Root>
  );
}

API Reference

ContextMenu

base-ui docs ↗

A menu that appears at the pointer on right-click or long press. Supports
items, separators, groups, keyboard shortcuts, and disabled states.

Prop	Type	Default
children*	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	—
The element that can be right-clicked / long-pressed to open the menu.
items*	`ContextMenuEntry[]`	—
Array of menu entries: items, separators, and groups.
className	`string`	—

Styled Parts

base-ui docs ↗

Pre-styled wrappers around the corresponding base-ui parts. All base-ui props are forwarded.

CSS Class Names

Available as keys on the ContextMenuStyles object. Each key maps to a hashed CSS module class name at runtime.

group-labelitemitem-iconitem-labelitem-shortcutpopuppositionerseparatorsubmenu-iconsubmenu-triggertrigger