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.json

Composition

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuLabel
    ├── DropdownMenuSeparator
    ├── DropdownMenuItem
    └── DropdownMenuItem

Accessibility

이 컴포넌트는 WAI-ARIA menu 패턴을 따릅니다.

Keyboard interactions

KeyDescription
EnterSpace
트리거에서 메뉴 열기.
메뉴 항목 간 이동.
타이핑
해당 글자로 시작하는 항목으로 점프.
Enter
선택.
Esc
메뉴 닫기 + 트리거로 포커스 복귀.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.