reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
DropdownMenu
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.

DropdownMenu

Component

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

navoverlay
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { DropdownMenu, DropdownTrigger, DropdownContent, DropdownItem, DropdownSeparator } from "@reopt-ai/opt-ui";

Live preview

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

100%

기본 사용

아이콘 + 섹션

정렬 옵션

DropdownContent

PropTypeDefaultDescription
gutternumber4트리거와의 간격 (px)

DropdownItem

PropTypeDefaultDescription
variant"default" | "destructive""default"메뉴 아이템 시각 변형. destructive는 위험 작업 강조
onClick() => void—항목 클릭 핸들러
disabledboolean—비활성 상태

컴포넌트 의존 관계

깊이
▲ USED BY (4)criteria-builderexport-buttonbulk-actionsquery-toolbarDropdownMenu
View test results

테스트 커버리지

2026년 7월 9일2/2 통과
2성공
0실패
2전체
  • 트리거를 렌더링한다
  • 클릭 시 메뉴 항목을 표시한다

키보드 동작

키동작
↑ ↓메뉴 항목 탐색
Enter / Space항목 선택
Esc메뉴 닫기

Related components

opt-ui

Menu

Core

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

opt-ui

KeyPadMenu

Core

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

opt-ui

Tabs

Core

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

opt-ui

Breadcrumb

Core

Show the current location and provide navigation through its hierarchy.

opt-ui

Disclosure

Core

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

opt-ui

Dialog

Core

Compose accessible modal dialogs with triggers, headings, descriptions, dismissal controls, and header, body, and footer regions.

PreviousPopoverNextNumberInput