API Reference Complete API documentation for Ray Menu
Complete reference for all Ray Menu APIs.
Attribute Type Default Description 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
Property Type Description 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 []>;
}
Method Signature Description 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
Event Detail Description 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
Available via ray-menu/core:
import { distributeAngles } from "ray-menu/core" ;
const angles = distributeAngles (itemCount, startAngle, sweepAngle);
// number[] - angle for each item in radians
import { toCartesian } from "ray-menu/core" ;
const point = toCartesian (center, { angle, distance });
// { x: number, y: number }
import { toDegrees, toRadians } from "ray-menu/core" ;
toDegrees (Math. PI ); // 180
toRadians ( 90 ); // Math.PI / 2