Dropdown Menu

버튼으로 트리거되는 작업 또는 기능 목록 메뉴를 표시합니다.

examples/krds/dropdown-menu-demo.tsx

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/dropdown-menu.json

사용법

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

구성

다음 조합으로 DropdownMenu:

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuItem
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   ├── DropdownMenuCheckboxItem
    │   └── DropdownMenuCheckboxItem
    ├── DropdownMenuSeparator
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   └── DropdownMenuRadioGroup
    │       ├── DropdownMenuRadioItem
    │       └── DropdownMenuRadioItem
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent
            └── DropdownMenuGroup
                ├── DropdownMenuLabel
                ├── DropdownMenuItem
                └── DropdownMenuItem

KRDS 정렬

분류: Radix/shadcn DropdownMenu compound API를 유지하는 KRDS-styled action menu입니다. DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSub 조합은 그대로 사용할 수 있습니다.
KRDS 적용: 아이콘, 단축키, 체크박스/라디오 선택, destructive 액션, submenu 계층은 메뉴 구조를 바꾸지 않고 KRDS interaction pattern으로만 정렬합니다.
사용 권장: 페이지 내부의 보조 액션, 계정 메뉴, 상태 선택처럼 짧은 선택 목록에 사용하고, 전역 탐색은 NavigationMenu 또는 Sidebar 문서의 의미에 맞게 분리하세요.

예제

Basic

A basic dropdown menu with labels and separators.

examples/krds/dropdown-menu-basic.tsx

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,

Submenu

Use DropdownMenuSub to nest secondary actions.

examples/krds/dropdown-menu-submenu.tsx

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,

Shortcuts

Add DropdownMenuShortcut to show keyboard hints.

examples/krds/dropdown-menu-shortcuts.tsx

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,

Icons

Combine icons with labels for quick scanning.

examples/krds/dropdown-menu-icons.tsx

import {
  CreditCardIcon,
  LogOutIcon,

Checkboxes

Use DropdownMenuCheckboxItem for toggles.

examples/krds/dropdown-menu-checkboxes.tsx

"use client"

import * as React from "react"

Checkboxes Icons

Add icons to checkbox items.

examples/krds/dropdown-menu-checkboxes-icons.tsx

"use client"

import * as React from "react"

Radio Group

Use DropdownMenuRadioGroup for exclusive choices.

examples/krds/dropdown-menu-radio-group.tsx

"use client"

import * as React from "react"

Radio Icons

Show radio options with icons.

examples/krds/dropdown-menu-radio-icons.tsx

"use client"

import * as React from "react"

Destructive

Use variant="destructive" for irreversible actions.

examples/krds/dropdown-menu-destructive.tsx

import { PencilIcon, ShareIcon, TrashIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Avatar

An account switcher dropdown triggered by an avatar.

examples/krds/dropdown-menu-avatar.tsx

import {
  BadgeCheckIcon,
  BellIcon,

Complex

A richer example combining groups, icons, and submenus.

examples/krds/dropdown-menu-complex.tsx

"use client"

import * as React from "react"

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/dropdown-menu-rtl.tsx

"use client"

import * as React from "react"

API 참조

전체 API 참조는 Radix UI Docs를 참고하세요.

Drawer Dropdown