ray-menuray-menu

API Reference

Complete API documentation for Ray Menu

API Reference

Complete reference for all Ray Menu APIs.

Web Component <ray-menu>

Attributes

AttributeTypeDefaultDescription
radiusnumber140Outer radius of the menu
inner-radiusnumber45Inner radius (center area)
infinite-selectionbooleanfalseExtend selection infinitely by angle
center-deadzonenumber30Pixels from center before selection starts
infinite-thresholdnumber0Distance where infinite selection begins (0 = truly infinite)
edge-behaviorstring"flip"Edge handling: "shift", "flip", or "none"
show-trail-pathbooleanfalseShow cursor trail path effect
show-anchor-linebooleanfalseShow anchor line from menu edge to cursor
center-transparentbooleantrueMake center area transparent
instant-drag-throughbooleanfalseEnable instant drag-through to submenus
scroll-behaviorstring"close""close", "keep", "lock", or "none"
scroll-thresholdnumber10Pixels of scroll before behavior triggers
start-anglenumber-90Start angle in degrees
sweep-anglenumber360Sweep angle in degrees (for fan layouts)
variantstring"slice"Visual variant: "slice" or "bubble"
staticbooleanfalseStatic/dock mode (relative positioning)
default-openbooleanfalseOpen menu on mount

Properties

PropertyTypeDescription
itemsMenuItem[]Menu items (set via JS)
isOpenbooleanWhether menu is currently open
isDropTargetbooleanWhether menu is in drop target mode
interface MenuItem {
  id: string;
  label: string;
  icon?: string;
  shortcut?: string;
  disabled?: boolean;
  selectable?: boolean;
  children?: MenuItem[];
  loadChildren?: () => Promise<MenuItem[]>;
}

Methods

MethodSignatureDescription
open(x: number, y: number) => voidOpen menu at coordinates
close() => voidClose the menu
toggle(x: number, y: number) => voidToggle menu at coordinates
goBack() => booleanNavigate back in submenu stack
goToRoot() => voidNavigate to root menu
openAsDropTarget(x: number, y: number) => voidOpen as drag & drop target
updateHoverFromPoint(x: number, y: number) => voidUpdate hover during drag
dropOnHovered(data?: any) => MenuItem | nullDrop on currently hovered item
cancelDrop() => voidCancel drop target mode

Events

EventDetailDescription
ray-selectMenuItemItem selected
ray-open-Menu opened
ray-close-Menu closed
ray-submenu-enter{ item, depth }Entered a submenu
ray-submenu-exit{ item, depth }Exited a submenu
ray-load-startMenuItemAsync children loading started
ray-load-completeMenuItemAsync children loaded
ray-load-error{ item, error }Async loading failed
ray-drop{ item, data }Item dropped on
ray-spring-loadMenuItemSpring-load triggered during drag

Core Utilities

Available via ray-menu/core:

distributeAngles

import { distributeAngles } from "ray-menu/core";

const angles = distributeAngles(itemCount, startAngle, sweepAngle);
// number[] - angle for each item in radians

toCartesian

import { toCartesian } from "ray-menu/core";

const point = toCartesian(center, { angle, distance });
// { x: number, y: number }

toDegrees / toRadians

import { toDegrees, toRadians } from "ray-menu/core";

toDegrees(Math.PI); // 180
toRadians(90); // Math.PI / 2

On this page