Context Menu
우클릭으로 호출되는 컨텍스트 메뉴 컴포넌트
개요
Context Menu 컴포넌트는 특정 영역에서 마우스 우클릭 시 표시되는 메뉴입니다. 메뉴 항목, 구분선, 단축키, 아이콘 등을 지원합니다.
주요 특징
- ✅ 커서 위치 기준 표시: 우클릭 위치에 메뉴 표시
- ✅ 외부 클릭 닫힘: 메뉴 외부 클릭 시 자동 닫힘
- ✅ 메뉴 리스트: 여러 항목을 리스트로 표시, Separator로 그룹 구분
- ✅ 아이콘 지원: 메뉴 항목에 아이콘 표시 가능
- ✅ 비활성 메뉴: disabled 상태 지원
- ✅ 접근성: ARIA 속성 지원
- ✅ 디자인 토큰: 테마 커스터마이징 지원
사용 예시
기본 사용
Preview
아이콘과 함께 사용
Preview
비활성 메뉴
Preview
메뉴 선택 핸들러
Preview
API Reference
ContextMenu
| Prop | Type | Default | Description |
|---|---|---|---|
onOpenChange | (open: boolean) => void | - | 메뉴 열림/닫힘 변경 |
children | React.ReactNode | - | Trigger + Content |
ContextMenuTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | 우클릭 대상 영역 |
className | string | - | 추가 CSS 클래스 |
ContextMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" | "center" | "end" | "start" | 정렬 방향 |
alignOffset | number | 4 | 정렬 오프셋 |
side | "top" | "right" | "bottom" | "left" | "right" | 표시 방향 |
sideOffset | number | 0 | 표시 오프셋 |
className | string | - | 추가 CSS 클래스 |
ContextMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | 스타일 variant |
disabled | boolean | false | 비활성화 |
inset | boolean | false | 좌측 여백 추가 |
className | string | - | 추가 CSS 클래스 |
Events
| Event | Type | Description |
|---|---|---|
onSelect | () => void | 메뉴 항목 선택 |
ContextMenuSeparator
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
ContextMenuShortcut
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | 추가 CSS 클래스 |
기본 사용법
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuShortcut,
} from "@vortex/ui-foundation"
<ContextMenu>
<ContextMenuTrigger>
<div>우클릭 영역</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>항목 1</ContextMenuItem>
<ContextMenuItem>항목 2</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>항목 3</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>접근성
ARIA 속성
// Context Menu는 자동으로 적절한 ARIA role을 적용합니다.
// - ContextMenuContent: role="menu"
// - ContextMenuItem: role="menuitem"
// - 키보드 내비게이션 지원 (↑↓ 키)권장 사항
- ✅ 키보드로 메뉴 항목 탐색 가능
- ✅ Escape 키로 메뉴 닫기
- ✅ 비활성 항목에 명확한 시각적 피드백
관련 컴포넌트
- DropdownMenu: 버튼 클릭으로 열리는 메뉴
- Menubar: 수평 메뉴바
Last updated on