ContextMenu

A right-click menu that opens at the mouse position within its wrapped region.

Basic usage

Trigger on right-click

Right-click this area to view the menu

Example

Disabled items

Disabled items

Right-click to view (Delete is disabled)

Example

Nested submenu

Nested submenu

Right-click to view the nested submenu

Example

Items with children expand cascading submenus on hover/click; selecting a leaf item collapses them and closes the menu.

Selection event

Selection event

Right-click this area

Nothing selected

Example

Programmatic positioning & controlled open

show(x, y) / close()

Open at (140, 120)CloseNot open

Right-click this area, or open at arbitrary coordinates via the button above

Example

show(x, y) opens the menu at any coordinates (table rows / canvas / text-selection right-click), close() closes it programmatically; the open attribute controls visibility, and oas-open-change reports the open/close state.

Long-press trigger (mobile)

Mobile devices have no right-click; a long press (500ms by default) opens the menu. long-press-delay adjusts the duration in milliseconds. Verify with DevTools device emulation on desktop.

Long-press trigger

Long-press this area on a touch device

Example

Close on scroll

The menu is fixed-positioned; scrolling the page or an inner scroll container closes it by default (so it never detaches from the content). Set close-on-scroll="false" to disable.

Close on scroll

Right-click to open, then scroll the area below — the menu closes

Right-click me: close-on-scroll="false" stays open on scroll

Scrollable content… (scrolling here while the menu is open closes it automatically)

Example

API

Attributes

Attribute	Description	Type	Default
close-on-scroll	Close the menu on page scroll (default true)	string	true
items	Menu items JSON	string	[]
long-press-delay	Long-press duration in ms for touch trigger (default 500)	string	500
open	Controlled open state (writable externally)	boolean	—

Events

Event	Description
oas-open-change	Menu open state changed, detail: { open: boolean }
oas-select	An item was selected, detail: { value }

Slots

Name	Description
default	—

Opens at the mouse position; closes on Esc / outside click / selection; role="menu" + menuitem.