Skip to content

Menu

Action list anchored to a trigger. Use for overflow actions, account menus, and in-context commands.

Examples

Basic

Checkbox and radio

Submenu

Overview

Menu opens a positioned list of items from a trigger. Compose portal, positioner, and popup. Style the trigger with Button via render. Prefer Select or Combobox when the goal is choosing a form value.

tsx

import {
  Button,
  Menu,
  MenuTrigger,
  MenuPortal,
  MenuPositioner,
  MenuPopup,
  MenuItem,
  MenuSeparator,
} from "@standard-ui/react"

<Menu>
  <MenuTrigger render={<Button variant="outline" />}>
    Open menu
  </MenuTrigger>
  <MenuPortal>
    <MenuPositioner>
      <MenuPopup>
        <MenuItem>Profile</MenuItem>
        <MenuItem>Billing</MenuItem>
        <MenuSeparator />
        <MenuItem>Sign out</MenuItem>
      </MenuPopup>
    </MenuPositioner>
  </MenuPortal>
</Menu>

Usage

Trigger

Pass Button through render so the control keeps Standard UI styles without nesting buttons.

tsx

<MenuTrigger render={<Button variant="outline" />}>
  Open menu
</MenuTrigger>

Anatomy

Keep the full tree so positioning and keyboard behavior stay intact.

tsx

Menu
  MenuTrigger
  MenuPortal
    MenuPositioner
      MenuPopup
        MenuItem
        MenuSeparator

API

Parts mirror Base UI Menu. Common parts:

PartRole
MenuRoot state and open control.
MenuTriggerOpens the menu. Use Button via render.
MenuPopupSurface for items, groups, and separators.
MenuItemAction row that closes the menu by default.
MenuCheckboxItemToggleable preference inside the menu.
MenuRadioGroupSingle-choice options inside the menu.
MenuSubmenuRootNested menu with MenuSubmenuTrigger.

Guidelines

Do

  • Use menus for actions and preferences, not long forms
  • Group related items and separate destructive actions
  • Keep labels short and verb-led when they perform an action

Don't

  • Don't nest a Button inside MenuTrigger — use render
  • Don't use Menu when Select or Combobox fits the form better
  • Don't bury primary actions only in a menu