Programmatic control

Open and close the menu from code, and change its content, theme, or animation at runtime.

What you'll see

Right-click or long-press the demo area to open the menu with “Option A” and “Option B”. The same menu could be opened from your own code with menu.open(x, y) or menu.open(button, { placement: "bottom-start" }). You can call menu.close(), menu.setMenu(...), menu.setOptions({ theme, position, animation }) to control state without user interaction.

Key points

• open(xOrEventOrElement?, yOrOptions?) — Show the menu. No args, (x, y), (event), or (element, options?) with placement and offset. Returns a Promise with the selected item (or undefined).
• close() — Close the menu; returns a Promise when the close animation finishes.
• getState() — Returns { isOpen, anchor, menu, rootElement }.
• setMenu(menuOrUpdater) — Replace menu (array) or update with (current) => newItems.
• setOptions(options) — Change theme, position, animation, or lockScrollOutside at runtime.

import { createContextMenu } from "@enegalan/contextmenu.js";
import "@enegalan/contextmenu.js/dist/style.css";
 
const menu = createContextMenu({
  menu: [
    { type: "item", label: "Option A", onClick: () => alert("A") },
    { type: "item", label: "Option B", onClick: () => alert("B") },
  ],
});
 
const btn = document.getElementById("open-btn");
const target = document.getElementById("target");
if (btn) btn.onclick = () => menu.openAtElement(btn, { placement: "bottom-start" });
if (target) target.oncontextmenu = (e) => {
  e.preventDefault();
  menu.open(e);
};

Related

• Basic usage — Opening and closing from code — open, close, getState.
• API reference — All instance methods and config options.
• Configuration — getAnchor, position, portal.