npm install ray-menu

<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" },
    { id: "delete", label: "Delete", shortcut: "⌫" },
  ];

  // Open on right-click
  document.addEventListener("contextmenu", (e) => {
    e.preventDefault();
    menu.open(e.clientX, e.clientY);
  });

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

menu.items = [
  { id: "copy", label: "Copy" },
  {
    id: "share",
    label: "Share",
    selectable: false,
    children: [
      { id: "email", label: "Email" },
      { id: "link", label: "Copy Link" },
      { id: "social", label: "Social" },
    ],
  },
];

menu.items = [
  {
    id: "move",
    label: "Move to",
    selectable: false,
    loadChildren: async () => {
      const folders = await fetchFolders();
      return folders.map((f) => ({ id: f.id, label: f.name }));
    },
  },
];