Menu

Open

Contract

Overview

Machine-readable contract from Component Spec.

component: menuexport: Menuversion: 1attributes: data-refineui=menu

Anatomy

Part	data-refineui
root	menu-root
divider	menu-divider
item	menu-item
popover	menu-popover
section	menu-section

States

Scope	Category	Values
component	pseudo	focus-visible
component	component	data-state: open, closed, default, hover, pressed, active, disabled
component	environment	forced-colors, dir

Accessibility

Slot	Element	Role
menu	div	menu
menu-item	div	menuitem

Keyboard

Key	Action	Native
Escape	close	—
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Menu, MenuPopover, MenuList, MenuItem, MenuDivider, MenuSection } from "@refineui/react";

<Menu>
  <MenuPopover>
    <MenuList>
      <MenuItem onSelect={() => handleNew()}>
        New File
      </MenuItem>
      <MenuItem onSelect={() => handleOpen()}>
        Open
      </MenuItem>
      <MenuDivider />
      <MenuItem state="disabled">
        Save (disabled)
      </MenuItem>
    </MenuList>
  </MenuPopover>
</Menu>

<Menu>
  <MenuPopover>
    <MenuList>
      <MenuSection>
        <MenuItem
          startIcon={<Icon />}
          endIcon={<Badge />}
          description="Description text"
          shortcut="⌘N"
        >
          Menu Item
        </MenuItem>
        <MenuSubTrigger>Submenu</MenuSubTrigger>
        <MenuSubContent>
          <MenuItem>Submenu Item</MenuItem>
        </MenuSubContent>
      </MenuSection>
    </MenuList>
  </MenuPopover>
</Menu>

API Reference

Menu

Prop	Default	Type	Description
positioning	—	MenuPositioning	Positioning configuration.

MenuPopover

Popover container for the menu.

MenuList

List container for menu items.

MenuItem

Prop	Default	Type	Description
description	—	ReactNode	Secondary description text.
shortcut	—	ReactNode	Keyboard shortcut hint.
startIcon	—	ReactNode	Leading icon.
endIcon	—	ReactNode	Trailing icon.
state	"default"	"default" | "hover" | "pressed" | "active" | "disabled"	Visual state.

MenuSection

Groups related menu items.

MenuDivider

Visual separator between items.

MenuSubTrigger

Submenu trigger item (shows chevron).

Prop	Default	Type	Description
description	—	ReactNode	Secondary description text.
startIcon	—	ReactNode	Leading icon.
state	"default"	"default" | "hover" | "pressed" | "active" | "disabled"	Visual state.

MenuSubContent

Submenu panel.