Menu

Try it

import {
  IconButton, Menu, MenuContent, MenuItem, MenuSeparator, MenuSub,
  MenuSubContent, MenuSubTrigger, MenuTrigger,
} from "@arcadia/ui";

<Menu>
  <MenuTrigger render={<IconButton icon="more" label="Chat actions" />} />
  <MenuContent size="lg" align="end">
    <MenuItem icon="pencil" shortcut="F2">Rename</MenuItem>
    <MenuItem icon="memory">Pin</MenuItem>
    <MenuItem icon="circle">Mark as unread</MenuItem>
    <MenuSeparator />
    <MenuItem icon="branch">Fork</MenuItem>
    <MenuSub>
      <MenuSubTrigger icon="folder-input">Move to</MenuSubTrigger>
      <MenuSubContent size="lg">
        <MenuItem icon="folder">acme-web</MenuItem>
        <MenuItem icon="folder">acme-api</MenuItem>
        <MenuItem icon="scratch">Scratch</MenuItem>
      </MenuSubContent>
    </MenuSub>
    <MenuSeparator />
    <MenuItem icon="trash" tone="danger" shortcut="⇧⌘⌫">Delete</MenuItem>
  </MenuContent>
</Menu>

TSX

import { Button, Menu, MenuContent, MenuItem, MenuTrigger } from "@arcadia/ui";

<Menu>
  <MenuTrigger render={<Button variant="outline" iconEnd="chevron-down">Options</Button>} />
  <MenuContent>
    <MenuItem icon="copy" shortcut="mod+c" onClick={copy}>Copy</MenuItem>
    <MenuItem icon="trash" tone="danger">Delete</MenuItem>
  </MenuContent>
</Menu>

Compose the trigger with render: a Button, an IconButton or a PickerTrigger. md is the picker menu (30px rows, 6px padding, full-bleed separators); lg is the action and context menu (32px rows, 8px padding, inset separators); both are radius 12. Section labels are eyebrows. The menu slides 4px toward its trigger as it opens, one highlight glides between its rows (a Glide), and submenus open on hover with no delay.

Icons are one column. Every leading glyph (a line icon, a provider mark, a swatch) sits in the same 16px slot, and once any row in a menu has an icon, the rows without one keep that column, so every label starts on one line. Labels never trail off with an ellipsis: the dialog a row opens, or a submenu's chevron, already says more follows.

Which overlay? A Menu lists actions or choices. A Popover holds content you act on, such as a form. A Hover Card previews what a link points to, and a Tooltip names a control in a few words.

Examples

Searchable picker

MenuSearch sits above the scroller and owns typing; the product owns filtering.

import { useState } from "react";
import {
  Menu, MenuContent, MenuEmpty, MenuRadioGroup, MenuRadioItem, MenuSearch,
  MenuTrigger, PickerTrigger,
} from "@arcadia/ui";

function SearchablePicker() {
  const [query, setQuery] = useState("");
  const [model, setModel] = useState("Large model");
  const shown = MODELS.filter((m) => m.toLowerCase().includes(query.trim().toLowerCase()));
  return (
    <Menu onOpenChange={(open) => { if (!open) setQuery(""); }}>
      <MenuTrigger render={<PickerTrigger label={model} shape="pill" />} />
      <MenuContent
        width={240}
        search={
          <MenuSearch
            autoFocus
            placeholder="Search models"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
        }
      >
        {shown.length ? (
          <MenuRadioGroup
            label="Models"
            value={model}
            onValueChange={(v) => setModel(String(v))}
          >
            {shown.map((m) => <MenuRadioItem key={m} value={m}>{m}</MenuRadioItem>)}
          </MenuRadioGroup>
        ) : <MenuEmpty>No matches</MenuEmpty>}
      </MenuContent>
    </Menu>
  );
}

Groups and toggles

Every row closes the menu when you pick it, checkbox rows too, as macOS menus do.

import { useState } from "react";
import {
  Button, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem,
  MenuSeparator, MenuTrigger, Switch,
} from "@arcadia/ui";

function Checkboxes() {
  const [chime, setChime] = useState(true);
  const [tips, setTips] = useState(false);
  return (
    <Menu>
      <MenuTrigger render={<Button variant="outline" iconEnd="chevron-down">View</Button>} />
      <MenuContent>
        <MenuGroup label="Notifications">
          <MenuCheckboxItem icon="volume" checked={chime} onCheckedChange={setChime}>
            Chime when done
          </MenuCheckboxItem>
          <MenuCheckboxItem icon="info" checked={tips} onCheckedChange={setTips}>
            Show tips
          </MenuCheckboxItem>
        </MenuGroup>
        <MenuSeparator />
        <MenuItem
          closeOnClick={false}
          end={<Switch label="Auto model" hideLabel size="sm" defaultChecked tabIndex={-1} />}
        >
          Auto model
        </MenuItem>
      </MenuContent>
    </Menu>
  );
}

States

Rendered open in place: rest, highlighted, a description, a shortcut, disabled, checked, a submenu trigger and danger, at both sizes. The specimen at the top shows a submenu open.

md: pickers, 30px rows

lg: actions, 32px rows

MenuContent takes where the menu sits and the menu knobs below; each row (MenuItem, MenuRadioItem, …) takes the row knobs, each a token of its kind. A colour, a raw length or any other property is a type error.

Takes	Default	Sets
`TokenRef<Measure>`	`180px`	Narrowest width (180, 220 for `lg`); the trigger's width when wider.
`TokenRef<Measure>`	`320px`	Widest width (320).
`TokenRef<Measure>`	`420px`	Tallest height (420); the space left beside the trigger when less.
`TokenRef<Radius>`	`var(--radius-xl)`	Corner radius.
`TokenRef<Space>`	`var(--space-1-5)`	Padding around the rows (6, 8 for `lg`).
`TokenRef<Space>`	`0px`	Gap between rows.
`TokenRef<Control>`	`30px`	Row height (30, 32 for `lg`).
`TokenRef<Space>`	`var(--space-1)`	Row block padding.
`TokenRef<Space>`	`var(--space-2-5)`	Row inline padding on a text side: the content inset of a menu without icons, and every row's end.
`TokenRef<Space> \| Derived`	`stylex.env.nest.iconInset("var(--menu-item-h)`	Row start padding in a menu whose rows lead with icons: the icon side, (row height − 16) / 2 (R2).
`TokenRef<Space>`	`var(--space-2)`	Gap between a row's icon, label and end.
`TokenRef<Radius>`	`stylex.env.nest.radius`	Row corner radius (the highlight follows it).
`TokenRef<Space>`	`var(--space-0-75)`	Space above and below a separator.

Item corners follow --menu-radius minus --menu-pad; changing the frame or padding keeps the highlight concentric.

Takes	Default	Sets
`Paint`	`var(--text-1)`	Label colour.
`Paint`	`var(--text-4)`	Label colour when disabled.
`Paint`	`var(--icon-2)`	Leading icon colour (an element icon such as a provider mark reads it too).
`Paint`	`var(--icon-1)`	Leading icon colour while the row is highlighted or its submenu is open.
`Paint`	`var(--icon-4)`	Leading icon colour when disabled.
`Paint`	`var(--fill-4)`	The highlight's fill under the pointer (drawn by the menu's Glide).
`Paint`	`var(--fill-3)`	The highlight's fill while the keyboard drives it: a step stronger.

Each state reads its own knob (--menu-item-icon-hl, --menu-item-fill-kbd, --menu-item-fg-disabled), so a knob you set never drops a state. An element icon, such as a provider mark, takes the row's icon colour too.

open: boolean; Controlled open state.
defaultOpen: booleanDefaultfalse; Initial open state when uncontrolled.
onOpenChange: (open: boolean, details: OpenChangeDetails) => void; Called when the menu opens or closes, with why (details.reason) and the event.
onOpenChangeComplete: (open: boolean) => void; Called once the open or close transition has finished.
modal: booleanDefaulttrue; Lock page scroll and pointer interaction outside while open.

Usage

Examples

Searchable picker

Groups and toggles

States

Customising

Accessibility

With a search field

API reference

MenuTrigger4 props

MenuContent14 props

MenuItem5 props

MenuCheckboxItem7 props

MenuRadioGroup5 props

MenuRadioItem5 props

MenuGroup1 prop

MenuSearch3 props

MenuSubTrigger4 props

MenuSubContent12 props