Overlays and menus

useContextMenu

Binds a trigger to a context menu that opens on right-click or Shift+F10 and supports Escape and roving item focus.

Copy React example ContextMenu component

Live component preview · Astro

Explore ContextMenu

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useContextMenu.

Right-click (or press Shift+F10) inside this area

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

import { ContextMenu, useContextMenu } from '@santi020k/lumen-react'

export function ProjectActions() {
  const menu = useContextMenu({ id: 'project-actions' })

  return (
    <>
      <button {...menu.triggerProps}>Project</button>
      <ContextMenu {...menu.menuProps}>
        <button role="menuitem">Duplicate</button>
        <button role="menuitem">Delete</button>
      </ContextMenu>
    </>
  )
}

import { ContextMenu, useContextMenu } from '@santi020k/lumen-react'

export function ProjectActions() {
  const menu = useContextMenu({ id: 'project-actions' })

  return (
    <>
      <button {...menu.triggerProps}>Project</button>
      <ContextMenu {...menu.menuProps}>
        <button role="menuitem">Duplicate</button>
        <button role="menuitem">Delete</button>
      </ContextMenu>
    </>
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

Property	Type	Default	Description
defaultOpen	boolean	false	Initial open state.
open	boolean	-	Controlled open state.
onOpenChange	(open: boolean) => void	-	Callback fired when the context menu opens or closes.
id	string	auto	Explicit id for the menu.

Controller return values

Property	Type	Description
triggerProps	LumenProps<"button">	Spread onto the trigger. Handles contextmenu and Shift+F10.
menuProps	LumenProps<"menu">	Spread onto ContextMenu. Includes data-ui-context-menu, role, hidden state, and keyboard handlers.
triggerRef	RefObject<HTMLElement>	Ref to the trigger.
menuRef	RefObject<HTMLElement>	Ref to the menu.
open	boolean	Current open state.
openAt	(x: number, y: number) => void	Open the menu at viewport coordinates.
close	() => void	Close the menu.