JavaScript Context Menu and Dropdown Menu Library

Try both menu types below: right-click inside the demo area to open a context menu, or click the button to open a dropdown menu. The examples show icons, disabled items, separators, nested submenus, and automatic positioning.

How hcg-context-menu compares with common alternatives.

Install hcg-context-menu with npm for bundled projects, or include the JavaScript and CSS files directly in a browser page. Both methods work without jQuery or any framework dependency.

npm install hcg-context-menu

// CommonJS
const hcgContextMenu = require("hcg-context-menu");

// ES Modules
import hcgContextMenu from "hcg-context-menu";
import "hcg-context-menu/hcg-context-menu.css";

<link rel="stylesheet" href="hcg-context-menu.css">
<script src="hcg-context-menu.js"></script>

Call hcgContextMenu() with a target element and an items array.

<div id="my-area" style="border:2px dashed #ccc;padding:60px;text-align:center;">
  Right-click anywhere in this box show context menu
</div>

hcgContextMenu({
  target: "#my-area",
  items: [
    { label: "Copy",  action: function (ctx) { console.log(ctx); } },
    { label: "Paste", disabled: true },
    { separator: true },
    { label: "Delete", action: function () { /* ... */ } }
  ]
});

<button id="context-menu">Right click context menu</button>

hcgContextMenu({
  target: "#context-menu",
  mode: "context",
  items: [
    { label: "Cut",   action: function () { /* ... */ } },
    { label: "Copy",  action: function () { /* ... */ } },
    { label: "Paste", action: function () { /* ... */ } }
  ]
});

<button id="menu-button">Dropdown</button>

hcgContextMenu({
  target: "#menu-button",
  mode: "dropdown",
  items: [
    { label: "Profile",  action: function () { /* ... */ } },
    { label: "Settings", action: function () { /* ... */ } },
    { separator: true },
    { label: "Sign out", action: function () { /* ... */ } }
  ]
});

<ul id="my-menu">
  <li data-hcg-icon="✏️" data-hcg-value="edit">Edit</li>
  <li data-hcg-value="copy">Copy</li>
  <li class="hcg-context-menu-separator"></li>
  <li data-hcg-disabled data-hcg-value="paste">Paste</li>
</ul>

<div id="my-area" style="border:2px dashed #ccc;padding:60px;text-align:center;">
  Right-click
</div>

hcgContextMenu({
    target: "#my-area",
    source: "#my-menu",
    onSelect: function (item) { console.log(item.value); }
  });

<ul id="full-menu">
  <li class="hcg-context-menu-header">Edit</li>
  <li data-hcg-icon="&#9986;"   data-hcg-value="cut">Cut</li>
  <li data-hcg-icon="&#128203;" data-hcg-value="copy">Copy</li>
  <li data-hcg-value="paste" data-hcg-disabled>Paste</li>
  <li class="hcg-context-menu-separator"></li>
  <li data-hcg-icon="&#128279;" data-hcg-label="Share">Share
    <ul>
      <li data-hcg-value="email">Email</li>
      <li data-hcg-value="link">Link</li>
    </ul>
  </li>
</ul>

<div id="my-area" style="border:2px dashed #ccc;padding:60px;text-align:center;">
  Preview
</div>

hcgContextMenu({
    target: "#my-area",
    source: "#full-menu",
    onSelect: function (item) { console.log("clicked:", item.value); }
  });

hcgContextMenu({
  target: "#board",
  items: function (ctx) {
    if (ctx.target.classList.contains("card")) {
      return [
        { header: "Card" },
        { label: "Edit",   action: function () { /* ... */ } },
        { label: "Delete", action: function () { /* ... */ } }
      ];
    }
    return [{ label: "New card", action: function () { /* ... */ } }];
  }
});

Each entry in the items array is an object. The fields you set decide what kind of item it becomes. The same items can also be written as HTML when you use the source option.

{ label: "Copy", icon: "📋", action: function () { /* ... */ } }

<li data-hcg-icon="&#128203;" data-hcg-value="copy">Copy</li>

{ html: "<strong>Profile</strong>", action: function () { /* ... */ } }
{ html: "<i>Copy</i>", action: function () { /* ... */ } }

<li data-hcg-html="&lt;strong&gt;Profile&lt;/strong&gt;" data-hcg-value="profile"></li>

{ separator: true }

<li class="hcg-context-menu-separator"></li>

{ header: "Actions" }

<li class="hcg-context-menu-header">Actions</li>

{
  label: "Share",
  icon: "🔗",
  submenu: [
    { label: "Email", action: function () { /* ... */ } },
    { label: "Link",  action: function () { /* ... */ } },
    { label: "More",  submenu: [
        { label: "Twitter", action: function () { /* ... */ } },
        { label: "Reddit",  action: function () { /* ... */ } }
    ] }
  ]
}

<li data-hcg-icon="&#128279;">Share
  <ul>
    <li data-hcg-value="email">Email</li>
    <li data-hcg-value="link">Link</li>
  </ul>
</li>

{ label: "Paste", disabled: true }

<li data-hcg-value="paste" data-hcg-disabled>Paste</li>

items: [
  { header: "Edit" },
  { label: "Cut",   icon: "✂",   action: function () {} },
  { label: "Copy",  icon: "📋", action: function () {} },
  { label: "Paste", disabled: true },
  { separator: true },
  { header: "Share" },
  { label: "Share", icon: "🔗", submenu: [
      { label: "Email", action: function () {} },
      { label: "Link",  action: function () {} }
  ] }
]

hcg-context-menu Features:

• Context or dropdown mode - right-click context menu or click dropdown.
• Array or HTML items - choose whichever fits your project.
• Dynamic items - pass a function to build the menu per target on every open.
• Section headers - non-clickable labels to group related items.
• Mobile long-press - opens the menu on touch devices.
• Scrollable menus - set a maxHeight for long item lists.
• Open animation - subtle fade and scale, with reduced-motion support.
• Nested submenu to any depth with automatic left flip.
• Icons, disabled items and separators for rich menus.
• Viewport aware positioning that never spills off screen.
• Keyboard navigation with arrow keys, Enter, Space and Escape.
• Accessibility with menu, menuitem and separator ARIA roles.
• Auto close on outside click, Escape, scroll, resize and blur.
• Dark mode theme using the prefers-color-scheme media query.

Create the menu inside a useEffect hook and close it in the cleanup function.

import { useEffect, useRef } from "react";
import hcgContextMenu from "hcg-context-menu";
import "hcg-context-menu/hcg-context-menu.css";

function Editor() {
  const areaRef = useRef(null);
  const menuRef = useRef(null);

  useEffect(() => {
    menuRef.current = hcgContextMenu({
      target: areaRef.current,
      items: [
        { label: "Copy",   action: () => console.log("copy") },
        { label: "Delete", action: () => console.log("delete") }
      ]
    });
    return () => menuRef.current.destroy();
  }, []);

  return <div ref={areaRef}>Right-click me</div>;
}

hcg-context-menu Options Reference:

Item fields

The factory returns a menu instance with the following methods.

A static helper closes every open menu at once.

hcgContextMenu.closeAll();

Keep the returned instance and call open() yourself, for example from a custom button.

const menu = hcgContextMenu({
  items: [
    { label: "Rename", action: () => rename() },
    { label: "Remove", action: () => remove() }
  ]
});

document.querySelector("#more").addEventListener("click", function (e) {
  const r = e.currentTarget.getBoundingClientRect();
  menu.open(r.left, r.bottom, e);
});

Events are exposed as callback options on the menu.

The context object contains the cursor position and the element that was clicked. The onClose callback receives a reason of "select" when an item was chosen, or "dismiss" when the menu was closed another way (outside click, Escape, scroll or blur).

hcgContextMenu({
  target: "#area",
  onOpen:   function (ctx) { console.log("opened at", ctx.x, ctx.y); },
  onSelect: function (item, ctx) { console.log(item.label, ctx.target); },
  onClose:  function (reason) { console.log("closed:", reason); }, // "select" or "dismiss"
  items: [ /* ... */ ]
});

You do not have to give every item its own action function. Instead you can leave the items as plain labels (optionally with a value) and handle all clicks in a single onSelect callback, then branch on which item was clicked.

Branching on the value is the cleanest approach, because the value stays the same even if you change the visible label:

hcgContextMenu({
  target: "#my-area",
  onSelect: function (item) {
    console.log("selected:", item);
    if (item.value === "copy")   doCopy();
    if (item.value === "paste")  doPaste();
    if (item.value === "delete") doDelete();
  },
  items: [
    { label: "Copy",   value: "copy" },
    { label: "Paste",  value: "paste" },
    { separator: true },
    { label: "Delete", value: "delete" }
  ]
});

You can also branch on the label text if you prefer not to set values:

onSelect: function (item) {
  if (item.label === "Copy")   doCopy();
  if (item.label === "Delete") doDelete();

A switch statement reads well when there are many items:

onSelect: function (item) {
  switch (item.value) {
    case "copy":   doCopy();   break;
    case "paste":  doPaste();  break;
    case "delete": doDelete(); break;
  }
}

This pattern also works with the HTML markup source, where you set the value with data-hcg-value on each list item. Note that per-item action functions and a central onSelect can be combined - the item action runs first, then onSelect.

hcg-context-menu works in all modern browsers that support standard DOM APIs.

Here are quick answers to common questions about using hcg-context-menu in JavaScript projects.

Related links:

• HTML Select Option Menu Generator