Dropdown

트리거 클릭으로 열리는 드롭다운 메뉴예요. 키보드 탐색과 포커스 트랩을 지원해요.

사용법

기본

DropdownMenuTrigger와 DropdownMenuContent로 메뉴를 구성해요. 항목에 description을 넣으면 보조 설명이 표시돼요.

체크 항목

DropdownMenuCheckboxItem으로 토글형 옵션을 넣을 수 있어요.

펼쳐진 메뉴 스타일

DropdownMenuContent의 style·classNames로 패널과 항목 스타일을 한 번에 지정할 수 있어요. CSS 변수는 패널에서 선언하면 항목·구분선에도 적용돼요.

스타일 커스터마이징

Dropdown 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<Dropdown
  className="shadow-md"
  style={{
    --gtd-dropdown-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<Dropdown
  classNames={{
    content: "my-dropdown-content",
    item: "my-dropdown-item",
    itemCopy: "my-dropdown-itemCopy",
    label: "my-dropdown-label",
    description: "my-dropdown-description",
    icon: "my-dropdown-icon",
    separator: "my-dropdown-separator",
    groupLabel: "my-dropdown-groupLabel",
    checkboxItem: "my-dropdown-checkboxItem",
    checkboxIndicator: "my-dropdown-checkboxIndicator"
  }}
/>

CSS 변수

변수	설명
--gtd-dropdown-bg	패널 배경색
--gtd-dropdown-border-color	패널 테두리색
--gtd-dropdown-radius	패널 모서리 반경
--gtd-dropdown-shadow	패널 그림자
--gtd-dropdown-padding	패널 내부 여백
--gtd-dropdown-item-color	항목 글자색
--gtd-dropdown-item-hover-bg	항목 호버·포커스 배경
--gtd-dropdown-item-radius	항목 모서리 반경
--gtd-dropdown-label-color	그룹 레이블 색
--gtd-dropdown-separator-color	구분선 색

인터페이스

DropdownProps

속성	타입	기본값	설명
DropdownMenuTrigger	ReactNode	—	메뉴를 여는 트리거 (asChild)
DropdownMenuContent	ReactNode	—	메뉴 패널 (style·classNames)
align	"start" \| "center" \| "end"	start	패널 정렬
sideOffset	number	8	트리거와 간격(px)
hideIcon	boolean	false	항목 우측 화살표 숨김
classNames	Record<string, string>	—	슬롯별 클래스 (root, label, input 등)
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { Dropdown } from "@/components/ui/DropdownMenu";