Installation
bash
npx axis-cli add dropdown-menuUsage
tsx
import {
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from '@axis-ds/ui-react'
export function Example() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">메뉴 열기</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuLabel>내 계정</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
프로필
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
설정
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
로그아웃
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}Components
DropdownMenu드롭다운 메뉴 루트 컨테이너
DropdownMenuTrigger메뉴를 여는 트리거
DropdownMenuContent메뉴 콘텐츠 영역
DropdownMenuItem메뉴 아이템
DropdownMenuLabel메뉴 그룹 레이블
DropdownMenuSeparator메뉴 아이템 구분선
DropdownMenuGroup메뉴 아이템 그룹
DropdownMenuShortcut키보드 단축키 표시
Props
DropdownMenu
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | - | 메뉴 열림 상태 (controlled) |
onOpenChange | (open: boolean) => void | - | 열림 상태 변경 콜백 |
modal | boolean | true | 모달 모드 여부 |
openType:
booleanDefault:
-메뉴 열림 상태 (controlled)
onOpenChangeType:
(open: boolean) => voidDefault:
-열림 상태 변경 콜백
modalType:
booleanDefault:
true모달 모드 여부
DropdownMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" | 메뉴가 나타나는 방향 |
align | "start" | "center" | "end" | "center" | 트리거 대비 정렬 |
sideOffset | number | 0 | 트리거로부터의 거리 (px) |
sideType:
"top" | "right" | "bottom" | "left"Default:
"bottom"메뉴가 나타나는 방향
alignType:
"start" | "center" | "end"Default:
"center"트리거 대비 정렬
sideOffsetType:
numberDefault:
0트리거로부터의 거리 (px)
Accessibility
Radix UI DropdownMenu 기반으로 WAI-ARIA Menu 패턴을 따릅니다.
| Key | Action |
|---|---|
| Enter / Space | 메뉴를 열거나 포커스된 항목을 실행합니다. |
| ↑ ↓ | 메뉴 항목 사이를 이동합니다. |
| → ← | 하위 메뉴를 열거나 닫습니다. |
| Esc | 메뉴를 닫고 트리거로 포커스를 복원합니다. |
- role="menu" / "menuitem"이 자동 적용되고 포커스가 메뉴 안에서 관리됩니다.
- 글자 입력 시 해당 항목으로 type-ahead 이동합니다.