DropdownMenu
버튼 클릭으로 호출되는 드롭다운 메뉴 컴포넌트
개요
DropdownMenu 컴포넌트는 Trigger 클릭 시 팝오버 형태로 메뉴를 표시합니다. 텍스트, 아이콘, 단축키, 체크박스, 라디오, 서브메뉴 등 다양한 메뉴 아이템을 지원합니다.
주요 특징
- ✅ 다양한 메뉴 아이템: 일반, 체크박스, 라디오, 서브메뉴
- ✅ 아이콘/단축키: 아이템에 아이콘과 단축키 텍스트 표시
- ✅ 그룹/라벨: Label과 Separator로 메뉴 그룹 구분
- ✅ Disabled 지원: 비활성 아이템 스타일
- ✅ 키보드 접근성: ↑↓ 탐색, Enter 실행, ESC 닫기
- ✅ 디자인 토큰: 테마 커스터마이징 지원
사용 예시
기본 사용
Preview
Trigger 버튼 클릭 시 드롭다운 메뉴가 표시됩니다.
아이콘과 단축키
Preview
아이콘과 단축키를 함께 표시합니다.
Label/Group과 Separator
Preview
DropdownMenuLabel과 DropdownMenuSeparator로 메뉴를 그룹화합니다.
Checkbox 아이템
Preview
체크 상태를 가지는 메뉴 아이템입니다.
Radio Group
Preview
단일 선택 라디오 그룹입니다.
Submenu
Preview
하위 메뉴를 가진 아이템입니다.
Disabled 아이템
Preview
disabled prop으로 메뉴 항목을 비활성화합니다.
API Reference
DropdownMenu
| Prop | Type | Default | Description |
|---|---|---|---|
onOpenChange | (open: boolean) => void | - | 메뉴 열림/닫힘 변경 |
children | React.ReactNode | - | Trigger + Content |
DropdownMenuTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | 트리거 요소 |
render | React.ReactElement | - | 커스텀 렌더링 |
DropdownMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" | "center" | "end" | "start" | 정렬 방향 |
alignOffset | number | 0 | 정렬 오프셋 |
side | "top" | "right" | "bottom" | "left" | "bottom" | 표시 방향 |
sideOffset | number | 4 | 표시 오프셋 |
className | string | - | 추가 CSS 클래스 |
DropdownMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | 스타일 variant |
disabled | boolean | false | 비활성화 |
inset | boolean | false | 좌측 여백 추가 |
className | string | - | 추가 CSS 클래스 |
DropdownMenuCheckboxItem
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | 체크 상태 |
disabled | boolean | false | 비활성화 |
DropdownMenuRadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | 선택된 값 |
onValueChange | (value: string) => void | - | 값 변경 핸들러 |
DropdownMenuRadioItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | 라디오 값 |
disabled | boolean | false | 비활성화 |
DropdownMenuLabel
| Prop | Type | Default | Description |
|---|---|---|---|
inset | boolean | false | 좌측 여백 추가 |
DropdownMenuShortcut
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
DropdownMenuSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
Events
| Component | Event | Type | Description |
|---|---|---|---|
DropdownMenuItem | onClick | () => void | 아이템 클릭 |
DropdownMenu | onOpenChange | (open: boolean) => void | 열림/닫힘 변경 |
기본 사용법
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
Button,
} from "@vortex/ui-foundation"
<DropdownMenu>
<DropdownMenuTrigger>
<Button variant="outline">Open</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>항목 1</DropdownMenuItem>
<DropdownMenuItem>항목 2</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>항목 3</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>접근성
키보드 내비게이션
- ↑ / ↓: 아이템 포커스 이동
- Enter: 포커스된 아이템 실행
- ESC: 메뉴 닫기
- →: 서브메뉴 열기
- ←: 서브메뉴 닫기
권장 사항
- ✅ Trigger에 명확한 라벨 또는 아이콘 사용
- ✅ 비활성 아이템에 명확한 시각적 피드백
- ✅ 관련 아이템을 Group과 Label로 묶기
관련 컴포넌트
- ContextMenu: 우클릭으로 열리는 메뉴
- Menubar: 수평 메뉴바
- Select: 단일 값 선택
Last updated on