playground: https://ray-menu.vercel.app/playground

Radial (pie) menu for the web. Framework-agnostic. Zero dependencies.

• Web Component — Works with any framework or vanilla HTML
• React bindings — useRayMenu hook with full TypeScript support
• Infinite selection — Select by angle, not distance
• Submenus — Nested menus with async loading support
• Keyboard nav — Arrow keys, number keys, escape
• Drag & drop — Use as a drop target with any drag library
• Theming — CSS variables with --ray-* prefix
• Edge detection — Auto-flip near screen edges

npm i ray-menu

<script type="module">
  import "ray-menu";

  const menu = document.querySelector("ray-menu");

  menu.items = [
    { id: "copy", label: "Copy" },
    { id: "paste", label: "Paste" },
    { id: "delete", label: "Delete" },
  ];

  document.addEventListener("contextmenu", (e) => {
    e.preventDefault();
    menu.open(e.clientX, e.clientY);
  });

  menu.addEventListener("ray-select", (e) => {
    console.log("Selected:", e.detail);
  });
</script>

<ray-menu></ray-menu>

import { useRayMenu } from "ray-menu/react";

function App() {
  const menu = useRayMenu({
    items: [
      { id: "copy", label: "Copy" },
      { id: "paste", label: "Paste" },
    ],
    onSelect: (item) => console.log(item),
  });

  return (
    <div
      onContextMenu={(e) => {
        e.preventDefault();
        menu.open(e.clientX, e.clientY);
      }}
    >
      Right-click me
    </div>
  );
}

ray-menu {
  --ray-bg: #1a1a2e;
  --ray-text: #ffffff;
  --ray-accent: #ff6b6b;
}

Full documentation at ray-menu.vercel.app/docs

MIT