Menu

Component

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

navoverlay

bun add @reopt-ai/opt-ui

100%

기본 사용

단일 메뉴

MenubarRoot

Prop	Type	Default	Description

MenubarContainer

Prop	Type	Default	Description
children*	ReactNode	—	MenuRoot 요소들
className	string	—	기본 스타일 오버라이드

MenuRoot

Prop	Type	Default	Description

MenuTrigger

Prop	Type	Default	Description
children*	ReactNode	—	메뉴 버튼 레이블
className	string	—	기본 스타일 오버라이드

MenuButtonArrow

Prop	Type	Default	Description
className	string	—	화살표 CSS 클래스

MenuPopover

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

MenuItem

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

MenuItemCheckbox

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

MenuItemRadio

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

MenuSeparator

Prop	Type	Default	Description
className	string	—	기본 스타일 오버라이드

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일1/1 통과

1성공

0실패

1전체

메뉴 트리거, 항목, 체크박스, 라디오, 구분선을 렌더링한다

키보드 동작

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

Related components

DropdownMenu

NavOverlay

KeyPadMenu

Nav

Tabs

NavIndicator

Breadcrumb

NavIndicator

AppMenubar

Nav

Disclosure

Overlay