사용법
기본
트리거를 누르면 메뉴 패널이 열려요. 바깥을 누르거나 Esc로 닫을 수 있어요.
스타일 커스터마이징
Menu 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Menu
className="shadow-md"
style={{
--gtd-dropdown-bg: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<Menu
classNames={{
content: "my-menu-content",
item: "my-menu-item",
label: "my-menu-label",
description: "my-menu-description",
icon: "my-menu-icon"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-dropdown-bg | 패널 배경색 (Dropdown과 동일) |
| --gtd-dropdown-border-color | 패널 테두리색 |
| --gtd-dropdown-item-hover-bg | 항목 호버·포커스 배경 |
인터페이스
MenuProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| trigger* | ReactNode | — | 메뉴를 여는 트리거 |
| items* | MenuItem[] | — | 메뉴 항목 |
| align | "start" | "end" | end | 패널 정렬 |
| classNames | Record<string, string> | — | 슬롯별 클래스 (root, label, input 등) |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
Menu 컴포넌트 Props 표
가져오기
import { Menu } from "@/components/ui/Menu";