reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
AppMenubar
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

AppMenubar

Shell

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

nav
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { AppMenubar } from "@reopt-ai/opt-ui";

Live preview

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

100%

기본 사용

AppMenubar

PropTypeDefaultDescription
menusRequiredMenuDef[]—메뉴 정의 배열. { id, label, items: MenuItemDef[] }

컴포넌트 의존 관계

깊이
▼ USES (2)AppMenubarmenukbd
View test results

테스트 커버리지

2026년 7월 9일2/2 통과
2성공
0실패
2전체
  • menubar role을 렌더링한다
  • 메뉴 트리거를 렌더링한다

키보드 동작

키동작
← →상위 메뉴 사이 포커스 이동
Enter / Space / ↓메뉴 열기
↑ ↓열린 메뉴 항목 이동
Escape메뉴 닫고 트리거로 복귀

Related components

opt-ui

Menu

Core

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

opt-ui

ContentTabs

Shells

Switch between content panels with a wrapper around the Tabs primitive.

opt-ui

SidebarNav

Shells

Navigate a sidebar with Composite keyboard support and automatic pathname synchronization.

opt-ui

CommandPalette

Shells

Find commands with a Cmd+K-style palette combining Dialog, Combobox, and fuzzy search.

opt-ui

CommandPaletteTrigger

Shells

Open CommandPalette with an automatically bound Cmd+K shortcut.

opt-ui

ProjectSwitcher

Shells

Search and switch projects with a fuzzy-search combobox.

PreviousSettingsFormNextCommandPalette