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