Dropdown Menu
Stablev1.0.0트리거에 연결된 옵션 메뉴.
Loading preview…
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
<DropdownMenu>
<DropdownMenuTrigger render={<Button variant="outline" />}>
Open menu
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Installation
pnpm dlx shadcn@latest add https://groudit.com/r/dropdown-menu.jsonComposition
DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
├── DropdownMenuLabel
├── DropdownMenuSeparator
├── DropdownMenuItem
└── DropdownMenuItemAccessibility
이 컴포넌트는 WAI-ARIA menu 패턴을 따릅니다.
Keyboard interactions
| Key | Description |
|---|---|
EnterSpace↓ | 트리거에서 메뉴 열기. |
↑↓ | 메뉴 항목 간 이동. |
타이핑 | 해당 글자로 시작하는 항목으로 점프. |
Enter | 선택. |
Esc | 메뉴 닫기 + 트리거로 포커스 복귀. |