iconiq
—Open GitHub

Context Menu

Animated context menu that opens from a native right-click surface, handles viewport flipping, and supports per-item icons, shortcuts, and destructive actions.

Open in

Right-click this workspace block

Inspect spacing, shortcuts, separators, and the destructive row in the same menu.

Installation

npx shadcn@latest add @iconiq/context-menu

Props

ContextMenu

4 props

Stateful wrapper that listens for the native contextmenu event on a local surface and renders a fixed-position floating menu.
itemsContextMenuItem[]
Required
Ordered list of menu rows. Each item defines its own label, optional icon and shortcut, click handler, and row state.
childrenReactNode
Required
Content wrapped by the local context-click target. The component always renders a div around this content and attaches the right-click handler there.
classNamestring
Merged onto the wrapper div that receives the native context menu event.
menuClassNamestring
Merged onto the floating motion.div for local surface styling overrides. The component still applies an inline width of 232px.

Notes

Open state is fully internal. This implementation does not expose controlled open props, state callbacks, or an imperative API.
The menu opens only from the native contextmenu event, then flips horizontally or vertically when the estimated panel would overflow the viewport.
Closing is handled internally on outside mousedown, scroll, resize, and Escape. ArrowUp and ArrowDown move the highlighted row in local state, but DOM focus does not move into the menu.

ContextMenuItem

7 props

Data shape used by the items prop to define each row in the menu.
labelstring
Required
Primary row copy rendered as the main action label.
iconReactNode
Optional leading visual rendered inside the fixed 16px icon slot.
shortcutstring
Optional trailing helper text, typically a keyboard hint such as R or Cmd+D.
onSelect() => void
Called when the row is activated with a click or Enter on the currently highlighted item.
destructiveboolean
Switches the row into the destructive color treatment and changes the active highlight tint.
disabledboolean
Dims the row and blocks pointer and Enter selection.
separatorAfterboolean
Inserts a thin divider after the row unless it is already the last rendered item.

Notes

Keyboard navigation skips disabled rows in both directions. If every row is disabled, the highlighted index stays unchanged.