Welcome to Ray Menu

Ray Menu is a modern, framework-agnostic radial/pie menu library built with TypeScript. It ships as a zero-dependency Web Component that works everywhere.

Key Features

• Zero Dependencies - Pure TypeScript core with no external dependencies
• Framework Agnostic - Works anywhere as a Web Component
• Infinite Radial Selection - Sectors extend infinitely outward based on angle
• Keyboard Navigation - Full keyboard support for accessibility
• Nested Submenus - Support for async-loaded submenus
• CSS Theming - Customize with CSS variables
• Drag & Drop - Built-in drop target mode

Quick Start

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

<ray-menu id="menu"></ray-menu>

<script>
  const menu = document.getElementById("menu");
  menu.items = [
    { id: "copy", label: "Copy", shortcut: "⌘C" },
    { id: "paste", label: "Paste", shortcut: "⌘V" },
    { id: "cut", label: "Cut", shortcut: "⌘X" },
  ];

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

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

How It Works

Ray Menu uses a radial selection model:

1. Trigger - Right-click or long-press to open the menu
2. Navigate - Move your cursor/finger in the direction of the item
3. Select - Release to select the highlighted item

The menu uses infinite radial selection - items are selected based on the angle from center, not the distance. This makes selection fast and intuitive.

Next Steps