Menu

Open

계약

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

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

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 레퍼런스

Menu

Prop	Default	Type	Description
positioning	—	MenuPositioning	포지셔닝 설정.

MenuPopover

메뉴용 팝오버 컨테이너.

MenuList

메뉴 항목 리스트 컨테이너.

MenuItem

Prop	Default	Type	Description
description	—	ReactNode	보조 설명 텍스트.
shortcut	—	ReactNode	키보드 단축키 힌트.
startIcon	—	ReactNode	앞쪽 아이콘.
endIcon	—	ReactNode	뒤쪽 아이콘.
state	"default"	"default" | "hover" | "pressed" | "active" | "disabled"	시각 상태.

MenuSection

관련 메뉴 항목을 그룹화합니다.

MenuDivider

항목 사이 시각적 구분선.

MenuSubTrigger

서브메뉴 트리거 항목(셰브론 표시).

Prop	Default	Type	Description
description	—	ReactNode	보조 설명 텍스트.
startIcon	—	ReactNode	앞쪽 아이콘.
state	"default"	"default" | "hover" | "pressed" | "active" | "disabled"	시각 상태.

MenuSubContent

서브메뉴 패널.