Menu

import { Button, Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger } from "@rdloom/react";

export default function MenuSectionsExample() {
  return (
    <MenuTrigger>
      <Button variant="secondary">Project</Button>
      <Menu>
        <MenuSection title="Share">
          <MenuItem id="invite">Invite people</MenuItem>
          <MenuItem id="copy-link">Copy link</MenuItem>
        </MenuSection>
        <MenuSeparator />
        <MenuSection title="Manage">
          <MenuItem id="rename">Rename</MenuItem>
          <MenuItem id="move">Move to…</MenuItem>
          {/* Destructive: red, and the text says exactly what happens. */}
          <MenuItem id="delete" variant="danger">
            Delete project
          </MenuItem>
        </MenuSection>
      </Menu>
    </MenuTrigger>
  );
}

import { useState } from "react";
import type { Selection } from "react-aria-components";
import { Button, Menu, MenuItem, MenuTrigger } from "@rdloom/react";

export default function MenuSelectableExample() {
  const [columns, setColumns] = useState<Selection>(new Set(["name", "status"]));

  return (
    <div className="flex items-center gap-3">
      <MenuTrigger>
        <Button variant="secondary">Columns</Button>
        {/* Items stay checked; the menu stays open while toggling several. */}
        <Menu selectionMode="multiple" selectedKeys={columns} onSelectionChange={setColumns}>
          <MenuItem id="name">Name</MenuItem>
          <MenuItem id="status">Status</MenuItem>
          <MenuItem id="owner">Owner</MenuItem>
          <MenuItem id="updated">Last updated</MenuItem>
        </Menu>
      </MenuTrigger>
      <p className="text-sm">Showing: {columns === "all" ? "all" : [...columns].join(", ")}</p>
    </div>
  );
}

import { Button, Menu, MenuItem, MenuTrigger } from "@rdloom/react";

export default function MenuIconButtonExample() {
  return (
    <MenuTrigger>
      {/* An icon-only button needs a name: screen readers say "More actions, menu button". */}
      <Button variant="ghost" aria-label="More actions">
        <svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" fill="currentColor">
          <circle cx="3" cy="8" r="1.5" />
          <circle cx="8" cy="8" r="1.5" />
          <circle cx="13" cy="8" r="1.5" />
        </svg>
      </Button>
      <Menu placement="bottom end">
        <MenuItem id="profile">Your profile</MenuItem>
        <MenuItem id="settings">Settings</MenuItem>
        <MenuItem id="sign-out">Sign out</MenuItem>
      </Menu>
    </MenuTrigger>
  );
}