Menu

Menu.Root opens from its trigger, such as a Button, an IconButton or an AvatarButton, which receives the menu button semantics and must accept native props and a ref, and names the menu, unless aria-label does. Its children are Menu.Header, Menu.Item, Menu.Group, Menu.RadioGroup, Menu.CheckboxItem, Menu.Submenu and Menu.Separator.

A Menu.Item runs its onClick and takes:

• its label as children;
• a decorative icon;
• a muted description, read as its description;
• a shortcut, such as Ctrl+D, shown as muted text in one unit and announced as aria-keyshortcuts;
• end content, such as a Badge, which is part of its name; a count there shows as its figures alone, without a pill, apart from the shortcut's keys;
• tone="danger" for a destructive action, such as Delete, whose label and icon take the danger color while its row highlights as any other's;
• disabled, which keeps it in place with aria-disabled, its icon dimmed and its label in the disabled text color, apart from its description, which stays muted and readable to say why.

Opening

• side is bottom, the default, top, left, right, or inline-start and inline-end, which follow the text direction, and it flips where the window has no room.
• align is start, center or end, the default.
• Leave the menu uncontrolled, with defaultOpen to start open, or control it with open and onOpenChange, which receives why, such as escape-key or item-press.
• className, ref, style and the other native props reach the popup.

Context menu

ContextMenu makes its one child the region, which must accept native props and a ref, and takes the menu's parts as content, as the ContextMenuForRows example does.

• content can be a function that receives the element the menu opened on and returns them; one that returns null leaves the menu closed there.
• disabled keeps the browser's own context menu.
• open, onOpenChange and anchorPoint open it from another control at a point.
• Offer every action as a visible control too.

<ContextMenu
  aria-label="Document actions"
  content={(target) => {
    const id = target?.closest<HTMLElement>('[data-entry]')?.dataset.entry;
    return id ? <Menu.Item onClick={() => remove(id)}>Delete</Menu.Item> : null;
  }}
>
  <List.Root aria-label="Documents">{rows}</List.Root>
</ContextMenu>

Account menu

Menu.Header holds the context at the top, such as the signed-in person's avatar, name and e-mail address, under an AvatarButton trigger, as the account and organizations pattern builds it. The avatar sits at the end of a top bar, so the menu lines up with the trigger's end.

<Menu.Root
  aria-label="Account"
  trigger={<AvatarButton name="Alex Morgan" aria-label="Open account menu" />}
>
  <Menu.Header>
    <Column align="center" gap={1} padding={2}>
      <Avatar name="Alex Morgan" size="lg" />
      <Text>Alex Morgan</Text>
      <Text variant="body-sm" emphasis="muted">
        alex@example.com
      </Text>
    </Column>
  </Menu.Header>
  <Menu.Item href="/account" icon={<IconManageAccounts />}>
    Account settings
  </Menu.Item>
  <Menu.Separator />
  <Menu.Item icon={<IconLogout />}>Sign out</Menu.Item>
</Menu.Root>

Groups, choices and submenus

• Menu.Group puts items under its label; Menu.Separator splits sets without one.
• Menu.RadioGroup holds Menu.RadioItems, each with a value, and takes value and onValueChange, or defaultValue alone, and a label, or aria-labelledby; a radio item closes the menu unless closeOnClick={false}.
• Menu.CheckboxItem takes checked and onCheckedChange, or defaultChecked alone, and keeps the menu open unless closeOnClick.
• ThemeMenuRadioGroup is the theme choice as radio items, from the nearest ThemePreferenceProvider, or from value and onValueChange; it keeps the menu open so people see the theme change.
• Menu.Submenu is a row with its label that opens its children beside it; open, defaultOpen and onOpenChange suit loading its items as it opens.

<Menu.Root trigger={<Button variant="secondary">View</Button>}>
  <Menu.RadioGroup label="Sort by" value={sort} onValueChange={setSort}>
    <Menu.RadioItem value="name">Name</Menu.RadioItem>
    <Menu.RadioItem value="size">Size</Menu.RadioItem>
  </Menu.RadioGroup>
  <Menu.Group label="Show">
    <Menu.CheckboxItem checked={hiddenFiles} onCheckedChange={setHiddenFiles}>
      Hidden files
    </Menu.CheckboxItem>
  </Menu.Group>
  <Menu.Submenu label="Theme">
    <ThemeMenuRadioGroup />
  </Menu.Submenu>
</Menu.Root>

Destinations

With href, a Menu.Item is a link, through the link component of LinkProvider, and the menu closes as it is followed.

• Its onClick runs as it is followed.
• target and rel are a native link's.
• A disabled one renders no link.
• aria-current="page" marks the page shown now.

<Menu.Item href="/help/guide" icon={<IconMenuBook />}>
  User guide
</Menu.Item>

The parts:

• The popup, env-menu, and its positioner, env-menu-positioner; the header, env-menu-header.
• A group, env-menu-group, with its label, env-menu-group-label.
• Each item, env-menu-item, with data-highlighted, data-disabled and data-tone. Its label and description are in env-menu-item-text, env-menu-item-label and env-menu-item-description; its end, env-menu-item-end, holds the shortcut, env-menu-item-shortcut.
• A radio or checkbox item, env-menu-choice, with data-checked, and its check in env-menu-item-indicator-slot and env-menu-item-indicator.
• A submenu's row, env-menu-submenu-trigger, with its chevron, env-menu-submenu-chevron.
• The separator, env-menu-separator.

Its popup is frosted, as every popup is: --env-popup-opacity, --env-popup-blur and --env-popup-shadow, set on a theme, change it, as Popover describes.