Dropdown
Dropdown은 트리거 요소를 클릭하면 표시되는 플로팅 메뉴입니다. 액션 목록, 체크박스, 라디오 선택, 서브메뉴를 지원합니다.
5
Item Types
3
Sizes
Sub
Nested
Radix
Base
Playground
미리보기
bottomcentermenu-r=mdbtn-r=default
Button
Size
Icon
Radius
Items
Radius
Flush
Items
Side
Align
<DropdownMenu>
<DropdownMenu.Trigger asChild>
<Button variant="outline"
rightIcon={<ChevronDown />} pressEffect={false}>Menu</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item>Profile</DropdownMenu.Item>
<DropdownMenu.Item>Settings</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>Log out</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu>Variants
Basic
액션 목록을 표시하는 가장 단순한 메뉴
컨텍스트 메뉴
Label + Group
라벨과 그룹으로 관련 액션을 분류
계정 메뉴
Checkbox
체크박스로 여러 항목을 ON/OFF로 전환
표시 설정, 필터
Radio
라디오로 하나만 선택
밀도, 테마 선택
Submenu
중첩 서브메뉴로 계층 구조 액션 구성
공유, 내보내기
Sizes
sm패딩6px 8px
아이템 폰트12px
md패딩6px 8px
아이템 폰트13px
lg패딩10px 12px
아이템 폰트14px
| Size | 패딩 | 아이템 폰트 | 미리보기 |
|---|---|---|---|
sm | 6px 8px | 12px | |
md | 6px 8px | 13px | |
lg | 10px 12px | 14px |
API
Component Structure
DropdownMenu— Radix DropdownMenu.Trigger.ContentProps.ItemProps.CheckboxItem.RadioGroup.RadioItem.Label.Separator.Group.Sub.SubTrigger.SubContent.Shortcut
.Trigger트리거 요소.ContentProps메뉴 패널 (radius, flush, size).ItemProps메뉴 아이템 (inset 지원).CheckboxItem체크박스 아이템.RadioGroup라디오 선택 그룹.RadioItem라디오 아이템.Label그룹 라벨.Separator구분선.Group아이템 그룹.Sub서브메뉴 루트.SubTrigger서브메뉴 트리거.SubContent서브메뉴 패널.Shortcut단축키 힌트Props
DropdownMenu.Content
size"md""sm" | "md" | "lg"메뉴 아이템 크기
radius"md""md" | "lg" | "xl"콘텐츠와 아이템 모서리 둥글기 (Item은 자동 계산)
flushfalseboolean아이템을 전체 너비로 표시 (내부 패딩 없음)
side"bottom""top" | "right" | "bottom" | "left"메뉴 표시 방향
sideOffset4number트리거와의 거리 (px)
align"center""start" | "center" | "end"트리거 기준 정렬
alignOffset0number정렬 오프셋 (px)
loopfalseboolean키보드 내비게이션 루프
| Name | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | 메뉴 아이템 크기 |
radius | "md" | "lg" | "xl" | "md" | 콘텐츠와 아이템 모서리 둥글기 (Item은 자동 계산) |
flush | boolean | false | 아이템을 전체 너비로 표시 (내부 패딩 없음) |
side | "top" | "right" | "bottom" | "left" | "bottom" | 메뉴 표시 방향 |
sideOffset | number | 4 | 트리거와의 거리 (px) |
align | "start" | "center" | "end" | "center" | 트리거 기준 정렬 |
alignOffset | number | 0 | 정렬 오프셋 (px) |
loop | boolean | false | 키보드 내비게이션 루프 |
DropdownMenu.Item
disabledundefinedboolean비활성 상태
onSelectundefined(event: Event) => void선택 시 콜백
insetundefinedboolean왼쪽 여백 추가 (아이콘 정렬용)
| Name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | undefined | 비활성 상태 |
onSelect | (event: Event) => void | undefined | 선택 시 콜백 |
inset | boolean | undefined | 왼쪽 여백 추가 (아이콘 정렬용) |
Customization
className으로 콘텐츠와 아이템의 스타일을 커스터마이즈할 수 있습니다.
너비 변경
<DropdownMenu.Content className="w-56">위험 액션 강조
<DropdownMenu.Item className="text-text-error focus:text-text-error">Tip: 각 서브 컴포넌트는 className을 받아 Tailwind 클래스로 스타일을 오버라이드할 수 있습니다.
Anatomy
1
2
Options3
4
5
Duplicate
6
Delete
1
Root
컴포넌트 루트
2
Trigger
메뉴를 여는 버튼
3
Content
플로팅 패널
4
Item
메뉴 아이템
5
Icon
옵션 아이콘
6
Separator
구분선
Best Practices
✓
권장
- ✓액션이 3개 이상일 때 사용
- ✓관련 액션은 Group으로 묶기
- ✓파괴적 액션은 시각적으로 구분
- ✓단축키가 있으면 표시
✕
지양
- ✗메뉴 항목을 10개 이상 두지 않기
- ✗내비게이션 용도에는 Nav 사용
- ✗서브메뉴를 2단계 이상 중첩하지 않기
- ✗모바일에서 긴 메뉴 피하기
Accessibility
키보드 조작
Enter메뉴 열기/닫기 / 아이템 선택
Space메뉴 열기/닫기 / 아이템 선택
↑ ↓아이템 간 이동
→서브메뉴 열기
←서브메뉴 닫기
Escape메뉴 닫기
ARIA 속성
role="menu"Content에 자동 부여role="menuitem"Item에 자동 부여aria-expandedTrigger 상태 관리- 포커스 인디케이터
Dropdown vs Select
외관은 비슷하지만 용도와 동작이 다릅니다. 적절한 컴포넌트를 선택하세요.
용도
Dropdown: 액션 실행
Select: 값 선택
폼 연동
Dropdown: 없음
Select: name / value 제출 가능
선택 후 표시
Dropdown: 메뉴만 닫힘
Select: 선택값이 트리거에 반영
아이템 종류
Dropdown: Item, Checkbox, Radio, Sub
Select: 단일 선택 아이템
사용 사례
Dropdown: 컨텍스트 메뉴, 계정 작업
Select: 국가, 카테고리, 정렬 순서
| 특징 | Dropdown | Select |
|---|---|---|
| 용도 | 액션 실행 | 값 선택 |
| 폼 연동 | 없음 | name / value 제출 가능 |
| 선택 후 표시 | 메뉴만 닫힘 | 선택값이 트리거에 반영 |
| 아이템 종류 | Item, Checkbox, Radio, Sub | 단일 선택 아이템 |
| 사용 사례 | 컨텍스트 메뉴, 계정 작업 | 국가, 카테고리, 정렬 순서 |
선택 기준: 값을 선택해 폼에 제출할 때는 Select 를 사용하세요. 클릭 시 액션(편집, 삭제, 공유 등)을 실행할 때는 Dropdown이 적합합니다.