V2 componentsUpdated Oct 14, 2026

Context Menu

A right-click menu anchored at the pointer. Items share styling with Menu; composition is explicit (Portal, Positioner, Popup) because there is no trigger button.

Import

Source: packages/ui/src/components/context-menu

tsx

1import { ContextMenu } from '@highlight/ui'

Playground

Change the props; the preview and the snippet update together.

Right-click here

Props

Submenu

Separator

Last item variant

tsx

1<ContextMenu>2  <ContextMenu.Trigger>Right-click here</ContextMenu.Trigger>3  <ContextMenu.Portal>4    <ContextMenu.Positioner>5      <ContextMenu.Popup className="min-w-40">6        <ContextMenu.Item>Rename…</ContextMenu.Item>7        <ContextMenu.Item>Duplicate</ContextMenu.Item>8        <ContextMenu.SubmenuRoot>9          <ContextMenu.SubmenuTrigger>Move to</ContextMenu.SubmenuTrigger>10          <ContextMenu.Portal>11            <ContextMenu.Positioner>12              <ContextMenu.Popup className="min-w-32">13                <ContextMenu.Item>Inbox</ContextMenu.Item>14                <ContextMenu.Item>Archive</ContextMenu.Item>15              </ContextMenu.Popup>16            </ContextMenu.Positioner>17          </ContextMenu.Portal>18        </ContextMenu.SubmenuRoot>19        <ContextMenu.Separator />20        <ContextMenu.Item variant="danger">Delete</ContextMenu.Item>21      </ContextMenu.Popup>22    </ContextMenu.Positioner>23  </ContextMenu.Portal>24</ContextMenu>

Basic

Includes a nested submenu.

Right-click here

tsx

1import { ContextMenu } from '@highlight/ui'2 3export default function ContextMenuBasic() {4  return (5    <ContextMenu>6      <ContextMenu.Trigger className="border-border text-foreground-secondary flex h-32 w-72 select-none items-center justify-center rounded-xl border border-dashed text-sm">7        Right-click here8      </ContextMenu.Trigger>9      <ContextMenu.Portal>10        <ContextMenu.Positioner>11          <ContextMenu.Popup className="min-w-40">12            <ContextMenu.Item>Rename…</ContextMenu.Item>13            <ContextMenu.Item>Duplicate</ContextMenu.Item>14            <ContextMenu.SubmenuRoot>15              <ContextMenu.SubmenuTrigger>Move to</ContextMenu.SubmenuTrigger>16              <ContextMenu.Portal>17                <ContextMenu.Positioner>18                  <ContextMenu.Popup className="min-w-32">19                    <ContextMenu.Item>Inbox</ContextMenu.Item>20                    <ContextMenu.Item>Archive</ContextMenu.Item>21                  </ContextMenu.Popup>22                </ContextMenu.Positioner>23              </ContextMenu.Portal>24            </ContextMenu.SubmenuRoot>25            <ContextMenu.Separator />26            <ContextMenu.Item variant="danger">Delete</ContextMenu.Item>27          </ContextMenu.Popup>28        </ContextMenu.Positioner>29      </ContextMenu.Portal>30    </ContextMenu>31  )32}

Parts

The root, then any compound sub-components. Every part accepts className and forwards the rest of its props to the element or Base UI part beneath it.

ContextMenu: Base UI ContextMenu.Root. Owns open state; opens at the pointer on right-click of its trigger.
ContextMenu.Trigger: The region that listens for contextmenu.
ContextMenu.Portal / Positioner / Popup: Always compose all three.
ContextMenu.Item / CheckboxItem / RadioGroup / RadioItem / Separator / Group / GroupLabel: Same API as Menu.
ContextMenu.SubmenuRoot / SubmenuTrigger: Nested menus.