Nested menus

Menus can have multiple levels: submenus open to the side (or flip to the other side when space is limited).

What you'll see

Right-click or long-press the demo area. The menu has a “New” action, an “Open” submenu (with “File…” and a “Recent” submenu containing files), a separator, and “Save”. Hover “Open” then “Recent” to open nested submenus, or use Arrow Right and Enter to open them with the keyboard.

Key points

• Nested submenus — A submenu’s children can include another type: "submenu" for arbitrary depth.
• children — Can be an array (as here), a function that returns an array, or an async function for lazy-loaded items.
• Positioning — Submenus open to the right by default (or left in RTL); use Configuration — Submenu placement to control.

import { createContextMenu } from "@enegalan/contextmenu.js";
import "@enegalan/contextmenu.js/dist/style.css";
 
const menu = createContextMenu({
  menu: [
    { type: "item", label: "New", onClick: () => {} },
    {
      type: "submenu",
      label: "Open",
      children: [
        { type: "item", label: "File...", onClick: () => {} },
        {
          type: "submenu",
          label: "Recent",
          children: [
            { type: "item", label: "doc.pdf", onClick: () => {} },
            { type: "item", label: "sheet.xlsx", onClick: () => {} },
          ],
        },
      ],
    },
    { type: "separator" },
    { type: "item", label: "Save", shortcut: "Ctrl+S", onClick: () => {} },
  ],
});
 
document.getElementById("target")?.addEventListener("contextmenu", (e) => {
  e.preventDefault();
  menu.open(e);
});

Related

• Concepts — Menu tree — How the menu tree is structured.
• API reference — Submenu — Submenu props and children.
• Configuration — Portal, position, submenu placement.