Menu ✦Documentation has not yet been reviewed by a human.

// One handler, keyed by each item's `value`.
const onSelect = (e, { value }) => act(value)

<Button>Actions</Button>
<Menu>
  <MenuItem icon="edit" label="Edit" kbd="⌘E" value="edit" onSelect={onSelect} />
  <MenuItem icon="copy" label="Duplicate" kbd="⌘D" value="duplicate" onSelect={onSelect} />
  <MenuItem icon="download" label="Export" value="export" onSelect={onSelect} />
  <MenuSeparator />
  <MenuItem tone="critical" icon="trash" label="Delete" kbd="⌘⌫" value="delete" onSelect={onSelect} />
</Menu>

<Menu>
  <MenuItem label="Neutral" />
  <MenuItem tone="brand" icon="star" label="Brand" />
  <MenuItem tone="info" icon="info" label="Info" />
  <MenuItem tone="success" icon="circle-check" label="Success" />
  <MenuItem tone="warning" icon="warning-triangle" label="Warning" />
  <MenuItem tone="critical" icon="trash" label="Critical" />
</Menu>

<Button>bottom-start</Button>
<Menu placement="bottom-start">…</Menu>

<Button>bottom-end</Button>
<Menu placement="bottom-end">…</Menu>

<Button>top-start</Button>
<Menu placement="top-start">…</Menu>

<Button>top-end</Button>
<Menu placement="top-end">…</Menu>

<div class="canvas">Right-click anywhere here</div>
<Menu context>
  <MenuItem icon="link" label="Share log" onSelect={share} />
  <MenuItem icon="copy" label="Copy moment" onSelect={copy} />
</Menu>

const COLUMNS = ['Name', 'Status', 'Owner', 'Created', 'Modified']
const [on, setOn] = useState(() => Object.fromEntries(COLUMNS.map((c) => [c, true])))
const allOn = COLUMNS.every((c) => on[c])
const someOn = COLUMNS.some((c) => on[c])
const only = (c) => setOn(Object.fromEntries(COLUMNS.map((k) => [k, k === c])))
// …toggle / toggleAll omitted

<Button>More</Button>
<Menu>
  <MenuItem icon="edit" label="Rename" />
  <MenuItem label="Move to" submenu>
    <Menu>
      <MenuItem icon="folder-open" label="Projects" />
      <MenuItem icon="folder-open" label="Archive" />
    </Menu>
  </MenuItem>
  <MenuItem label="View" submenu>
    <Menu>
      <MenuItem label="Columns" submenu>
        <Menu>
          <MenuItem label="Visible columns" submenu>
            <Menu>
              {/* custom content — never auto-closes thanks to data-menu-open */}
              <div class="menu-check-row" data-menu-open>
                {/* Checkbox takes 'indeterminate' directly — no ref poking */}
                <Checkbox
                  className="menu-check"
                  label="Select all"
                  checked={allOn ? true : someOn ? 'indeterminate' : false}
                  onStateChange={toggleAll}
                />
              </div>
              <MenuSeparator />
              {COLUMNS.map((c) => (
                <div class="menu-check-row" data-menu-open key={c}>
                  <Checkbox className="menu-check" label={c} checked={on[c]} onStateChange={() => toggle(c)} />
                  <Button priority="tertiary" size="small" onClick={() => only(c)}>Only</Button>
                </div>
              ))}
            </Menu>
          </MenuItem>
        </Menu>
      </MenuItem>
    </Menu>
  </MenuItem>
</Menu>

<Menu>
  <MenuGroup label="Sort by">
    <MenuItem icon="check" label="Name" />
    <MenuItem label="Date modified" />
  </MenuGroup>
  <MenuSeparator />
  <MenuGroup label="Show">
    <MenuItem label="Hidden files" data-menu-open />
  </MenuGroup>
</Menu>

<Menu>
  <MenuItem label="Profile" onSelect={openProfile} />
  {/* data-menu-open: a toggle that doesn't dismiss */}
  <MenuItem label="Notifications" data-menu-open onSelect={toggleNotifs} />
  <MenuSeparator />
  {/* data-menu-open region: interacting with the slider keeps the menu open;
      the Done button opts back into closing with data-menu-close */}
  <div data-menu-open class="zoom">
    <label>Zoom</label>
    <input type="range" />
    {/* a plain button, not a MenuItem — data-menu-close lets it dismiss */}
    <button data-menu-close>Done</button>
  </div>
</Menu>

<div className="row" onClick={openRow}>
  <span>Quarterly report.pdf</span>
  {/* the trigger is a plain button — stop its click so opening the
      menu isn't a row click; the menu items need no handling */}
  <Button
    icon="dots-vertical"
    aria-label="File actions"
    onClick={(e) => e.stopPropagation()}
  />
  <Menu>
    <MenuItem icon="edit" label="Rename" onSelect={rename} />
    <MenuItem icon="copy" label="Duplicate" onSelect={duplicate} />
    <MenuSeparator />
    <MenuItem icon="trash" tone="critical" label="Delete" onSelect={confirmDelete} />
  </Menu>
</div>

{/* Plain tint (no indicator) */}
<MenuItem label="Relevance" selected />

{/* Checkable rows — the row is the control; the mark is decorative */}
<MenuItem selectionIndicator="radio" label="Relevance" selected />
<MenuItem selectionIndicator="checkbox" label="Show archived" selected data-menu-open />

const [notifications, setNotifications] = useState(true)
const [automaticUpdates, setAutomaticUpdates] = useState(false)

<Button>Settings</Button>
<Menu>
  <MenuItem
    selectionIndicator="switch"
    label="Notifications"
    selected={notifications}
    onSelect={() => setNotifications((value) => !value)}
  />
  <MenuItem
    selectionIndicator="switch"
    label="Automatic updates"
    hint="Install new versions automatically"
    selected={automaticUpdates}
    onSelect={() => setAutomaticUpdates((value) => !value)}
  />
</Menu>

<Menu>
  <MenuItem icon="folder-open" label="Active" hint="12 open items"><Tag size="small" tone="info">12</Tag></MenuItem>
  <MenuItem icon="folder-close" label="Archived" hint="Read-only" />
  <MenuItem icon="trash" label="Trash"><Tag size="small">3</Tag></MenuItem>
</Menu>