Menu

Component

Compose menu bars and individual menus with checkbox items, radio items, separators, and popovers.

navoverlay

bun add @reopt-ai/opt-ui

Install and import

bash

bun add @reopt-ai/opt-ui

tsx

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

Live preview

Change the width and theme, then interact with the components.

100%

기본 사용

단일 메뉴

MenubarRoot

Prop	Type	Default	Description

MenubarContainer

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

MenuRoot

Prop	Type	Default	Description

MenuTrigger

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

MenuButtonArrow

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

MenuPopover

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

MenuItem

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

MenuItemCheckbox

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

MenuItemRadio

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

MenuSeparator

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

컴포넌트 의존 관계

깊이

View test results

테스트 커버리지

2026년 7월 9일1/1 통과

1성공

0실패

1전체

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

키보드 동작

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

Related components

DropdownMenu

Core

Create a single-trigger dropdown with a convenient wrapper around Menu Core.

KeyPadMenu

Core

Choose visual options from tiles backed by native radio buttons and checkboxes for keyboard and screen reader access.

Tabs

Core

Organize tab panels with Root, TabList, Tab, and TabPanel components.

Breadcrumb

Core

Show the current location and provide navigation through its hierarchy.

AppMenubar

Shells

Use a desktop-style menu bar with checkbox and radio menu items.

Disclosure

Core

Expand and collapse content with Root, Trigger, and Content components.