reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

© 2026 reopt-ai. All rights reserved.

Explore/Core/Menu

Menu

컴포넌트

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

navoverlay
관련 문서
bun add @reopt-ai/opt-ui
100%

기본 사용

단일 메뉴

관련 컴포넌트

DropdownMenu

Menu Core 위의 간편 래퍼. 단일 트리거 드롭다운 메뉴에 특화되었습니다.

네비게이션오버레이

Tabs

탭 패널 시스템. 4-part anatomy: Root, TabList, Tab, TabPanel.

네비게이션인디케이터

Breadcrumb

현재 위치를 표시하고 계층 탐색을 제공하는 컴포넌트.

네비게이션인디케이터

AppMenubar

데스크톱 스타일 메뉴바. 체크박스, 라디오 메뉴 항목 지원.

네비게이션

Disclosure

접기/펼치기 콘텐츠 영역. 3-part anatomy: Root, Trigger, Content.

오버레이

Dialog

모달 다이얼로그. 9-part anatomy: Root, Disclosure, Panel, Heading, Description, Dismiss, Header, Body, Footer.

오버레이
이전Combobox다음Toolbar

기본 사용

아이콘 + 섹션

정렬 옵션

기본 사용

개요 콘텐츠입니다.

비활성화 탭

첫 번째 활성화 탭

기본 사용

  1. 홈/
  2. 문서/
  3. Core/
  4. Breadcrumb

커스텀 구분자

  1. ›
  2. ›
  3. 상세

아이콘 포함

  1. /
  2. /
  3. 프로필

기본 사용

기본 사용

기본 열림 상태

opt-ui는 접근성 프리미티브 기반 UI 컴포넌트 라이브러리입니다. 키보드 탐색과 스크린 리더 지원을 기본 제공합니다.

기본 구조 — Header / Body / Footer

DialogDisclosure — 비제어 모드

DialogDisclosure를 사용하면 open/setOpen 상태 관리 없이 다이얼로그를 열고 닫을 수 있습니다.

사이즈 변형 — xs ~ full

접근성 — aria-labelledby / aria-describedby 자동 연결

DialogHeading은 자동으로 aria-labelledby를, DialogDescription은 aria-describedby를 다이얼로그에 연결합니다. 수동 ID 관리가 필요 없습니다.

스크롤 가능한 본문 — DialogBody overflow

다이얼로그 닫기 패턴

다이얼로그를 닫는 여러 방법을 확인할 수 있습니다. ESC, 배경 클릭, 또는 Button의 onClick으로 setOpen(false)을 호출합니다.

중첩 다이얼로그 — 다이얼로그 안에 다이얼로그

커스텀 레이아웃 — Header/Body/Footer 선택적 사용

Header, Body, Footer는 모두 선택적입니다. 필요한 부분만 사용할 수 있습니다.