Dropdown Menu
한 트리거에서 관련 명령과 설정을 엽니다.
- 성숙도
- 후보
- 소스 경로
components/ui/dropdown-menu.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/reactradix-ui
실제 미리보기
사용할 때
사용 기준
자주 쓰지 않는 관련 동작을 한곳에 묶을 때 씁니다.
사용하지 않을 때
주요 행동을 숨기거나 단순한 페이지 이동 목록을 대신하지 않습니다.
변형과 상태
default고정 예시트리거가 메뉴의 목적을 분명히 말하는지 확인합니다.
open직접 조작현재 항목과 키보드 초점이 명확한지 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
disabled고정 예시비활성 명령을 건너뛰면서 상태는 전달하는지 확인합니다.
접근성
방향키, typeahead, Escape, 하위 메뉴와 트리거 초점 복귀를 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
open | boolean | 아니요 | 제어되는 열림 상태입니다. |
onOpenChange | (open: boolean) => void | 아니요 | 열림 상태가 바뀔 때 호출됩니다. |
modal | boolean | 아니요 | 메뉴가 바깥 상호작용을 제한할지 정합니다. |
사용 예시
지원 importimport {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
<DropdownMenu>
<DropdownMenuTrigger>More</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Edit</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>