컴포넌트
Dropdown Menu
트리거 클릭 시 항목이 스태거 페이드로 순차 등장하는 드롭다운 메뉴. 외부 클릭·ESC로 닫히고 방향키/Home/End로 항목을 이동하며 비활성 항목은 자동으로 건너뜁니다. WAI-ARIA menu/menuitem 패턴과 reduced-motion을 지원합니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/DropdownMenu-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label | string | "메뉴" | 트리거 버튼에 표시할 텍스트. |
| items | DropdownMenuItem[] | DEFAULT_ITEMS | 표시할 항목 목록. 각 항목은 id·label·icon·disabled를 가질 수 있으며, 미지정 시 기본 데이터 사용. |
| onSelect | (item: DropdownMenuItem, index: number) => void | undefined | 항목 선택 시 호출되는 콜백(선택된 항목과 인덱스 전달). |
| placement | "bottom" | "top" | "bottom" | 메뉴가 펼쳐지는 방향. bottom=아래, top=위. |
| stagger | number | 40 | 항목 간 순차 페이드 지연(ms). |
| duration | number | 200 | 개별 항목 페이드 전환 지속(ms). |
| accentColor | string | "#C084FC" | 호버/포커스/보더 강조 색상. 기본값은 Vivid Kit 바이올렛. |
| className | string | undefined | 루트 래퍼에 적용할 추가 클래스명. |