#Context Menu

Context Menu exposes commands tied to a file, canvas node, or data row. It supports right click, Shift + F10, the Menu key, arrow navigation, submenus, disabled items, and focus restoration.

npm install @a3s-lab/ui@0.4.0

<div class="context-menu">
  <div data-context-trigger tabindex="0">deployment.acl</div>
  <div
    data-context-content
    role="menu"
    aria-label="File actions"
    aria-hidden="true"
  >
    <button type="button" role="menuitem" data-value="open">Open</button>
    <button type="button" role="menuitem" data-value="rename">Rename</button>
  </div>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<div class="context-menu">
  <div data-context-trigger tabindex="0">deployment.acl</div>
  <div
    data-context-content
    role="menu"
    aria-label="File actions"
    aria-hidden="true"
  >
    <button type="button" role="menuitem" data-value="open">Open</button>
    <button type="button" role="menuitem" data-value="rename">Rename</button>
  </div>
</div>

Load context-menu.js after the shared runtime, or use the complete bundle.

#Parameters

#JavaScript API

const menu = document.querySelector(".context-menu");
menu.open({ target: selectedNode });
menu.openAt(240, 160, selectedNode, { source: "api" });
menu.focusItem("rename");
console.log(menu.getState());
menu.addEventListener("a3s:context-menu-select", ({ detail }) =>
  run(detail.value, detail.target),
);

open() anchors to a target; openAt() uses viewport coordinates. focusItem(), select(), and setChecked() control stable data-value commands. close({ reason, restoreFocus, force }) reports why the menu left; the legacy close(false) signature remains valid. getState() returns open, target, position, and active-item state; refresh() rebinds replaced content.

Cancelable a3s:context-menu-before-open, a3s:context-menu-before-select, and a3s:context-menu-before-close hooks let a host authorize or populate commands before state changes. Completed open, select, and close events include source, reason, target, stable value, and boolean checked state. The controller does not open a menu with no enabled commands. It constrains root and nested menus to the visual viewport, including zoomed viewports, and closes safely on viewport movement.

React useContextMenu and the equivalent Vue composable listen to the same events and invoke manifest-declared controller methods through call().

#States and variants

Keep Context Menu commands short and directly related to the invocation target. Use Command for global navigation, Toolbar for persistent actions, and Alert Dialog for destructive confirmation. Populate permission-dependent commands in the before-open hook; remove unavailable groups and separators rather than presenting an empty or mostly disabled menu.

#Accessibility

Focusable trigger surfaces need a name or description. Use aria-disabled="true" for disabled items; arrow navigation skips them. Escape closes the complete menu and restores focus. Logical direction keys swap automatically in RTL.