Custom renderers

Use the render prop on action, checkbox, or radio items to return your own DOM element. The library still sets role, tabindex, and wires click and keyboard.

What you'll see

Right-click or long-press the demo area. The first item is built with a custom renderer (italic “Custom render: …” text); the second is a default action row. Both are focusable and clickable; only the visual content differs.

Key points

• render — A function (item) => HTMLElement. You create and return the DOM node; the library attaches it, sets accessibility attributes, and handles click/focus.
• Use case — Custom layout, icons, or markup that the default item template doesn’t support.
• Still accessible — Role, tabindex, and keyboard handling are applied to your element, so you only control the visual content.

import { createContextMenu } from "@enegalan/contextmenu.js";
import "@enegalan/contextmenu.js/dist/style.css";
 
const menu = createContextMenu({
  menu: [
    {
      type: "item",
      label: "Custom row",
      render: (item) => {
        const el = document.createElement("div");
        el.className = "flex items-center gap-2 px-3 py-2 italic";
        el.textContent = "Custom render: " + item.label;
        return el;
      },
      onClick: () => {},
    },
    { type: "item", label: "Default row", onClick: () => {} },
  ],
});
 
const el = document.getElementById("target");
if (el) menu.bind(el);

Related

• API reference — Action — The render prop and other action options.
• Accessibility — Keyboard and screen reader behavior.