Menu

core

메뉴바 + 개별 메뉴 시스템. 10 exports: MenubarRoot, MenubarContainer, MenuRoot, MenuTrigger, MenuButtonArrow, MenuPopover, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuSeparator.

컴포넌트 의존 관계

깊이

100%

기본 사용

단일 메뉴

테스트 커버리지

2026년 2월 4일

생성된 테스트 결과를 찾지 못했습니다.

Menu 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

MenubarContainer Props

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	MenuRoot 요소들
`className`	`string`	—	기본 스타일 오버라이드

MenuTrigger Props

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	메뉴 버튼 레이블
`className`	`string`	—	기본 스타일 오버라이드

MenuButtonArrow Props

Prop	타입	기본값	설명
`className`	`string`	—	화살표 CSS 클래스

MenuPopover Props

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	MenuItem 목록
`gutter`	`number`	`8`	트리거와의 간격 (px)
`className`	`string`	—	기본 스타일 오버라이드

MenuItem Props

Prop	타입	기본값	설명
`children`*	`ReactNode`	—	메뉴 항목 내용
`onClick`	`() => void`	—	클릭 핸들러
`className`	`string`	—	기본 스타일 오버라이드

MenuItemCheckbox Props

Prop	타입	기본값	설명
`name`*	`string`	—	체크박스 이름
`value`*	`string`	—	체크박스 값
`checked`	`boolean`	—	체크 상태
`onChange`	`(e: ChangeEvent) => void`	—	변경 핸들러
`children`*	`ReactNode`	—	항목 내용
`className`	`string`	—	기본 스타일 오버라이드

MenuItemRadio Props

Prop	타입	기본값	설명
`name`*	`string`	—	라디오 그룹 이름
`value`*	`string`	—	라디오 값
`checked`	`boolean`	—	선택 상태
`onChange`	`(e: ChangeEvent) => void`	—	변경 핸들러
`children`*	`ReactNode`	—	항목 내용
`className`	`string`	—	기본 스타일 오버라이드

MenuSeparator Props

Prop	타입	기본값	설명
`className`	`string`	—	기본 스타일 오버라이드

Import

tsx

import {
  MenubarRoot,
  MenubarContainer,
  MenuRoot,
  MenuTrigger,
  MenuButtonArrow,
  MenuPopover,
  MenuItem,
  MenuItemCheckbox,
  MenuItemRadio,
  MenuSeparator,
} from "@reopt-ai/opt-ui";

키보드 동작

키	동작
← →	메뉴 간 탐색
↑ ↓	메뉴 항목 탐색
Enter / Space	항목 선택/토글
Esc	메뉴 닫기