Dropdown Menu

설치 확인

버튼으로 여는 메뉴. 그룹, 하위 메뉴, 선택 상태

1. 목적과 출처

버튼으로 여는 메뉴. 그룹, 하위 메뉴, 선택 상태

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/dropdown-menu.tsx
Registry: @adcapsule/dropdown-menu

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Dropdown Menu 열기 단추
열기 단추	모양
아이콘 버튼
계정 메뉴

3. 속성 바꿔 보기

메뉴를 열어 보세요

하위 메뉴삭제(destructive)

<DropdownMenu>
  <DropdownMenuTrigger render={<IconButton label="이슈 작업" variant="outline" />}>
    <MoreHorizontal />
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={…}><Pencil />수정</DropdownMenuItem>
    <DropdownMenuCheckboxItem checked={starred} onCheckedChange={setStarred}>즐겨찾기</DropdownMenuCheckboxItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>우선순위</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>…</DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive"><Trash2 />삭제</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/dropdown-menu

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>열기</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={…}>수정</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

열기 단추는 render로(Button, IconButton 등)
DropdownMenuItem variant="destructive"
CheckboxItem·RadioGroup·Sub
DropdownMenuShortcut
DropdownMenuLabel은 반드시 DropdownMenuGroup 안에(밖에 두면 화면 오류)

공통으로 유지할 토큰

surface.raised (메뉴, --popover)
surface.hover (가리킨 항목)
status.danger (destructive 항목)
radius.lg (메뉴 10px)
radius.md (항목 6px)

열기 단추

모양

아이콘 버튼

계정 메뉴

3. 속성 바꿔 보기

메뉴를 열어 보세요

하위 메뉴삭제(destructive)

<DropdownMenu>
  <DropdownMenuTrigger render={<IconButton label="이슈 작업" variant="outline" />}>
    <MoreHorizontal />
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={…}><Pencil />수정</DropdownMenuItem>
    <DropdownMenuCheckboxItem checked={starred} onCheckedChange={setStarred}>즐겨찾기</DropdownMenuCheckboxItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>우선순위</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>…</DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive"><Trash2 />삭제</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/dropdown-menu

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>열기</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={…}>수정</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

열기 단추는 render로(Button, IconButton 등)
DropdownMenuItem variant="destructive"
CheckboxItem·RadioGroup·Sub
DropdownMenuShortcut
DropdownMenuLabel은 반드시 DropdownMenuGroup 안에(밖에 두면 화면 오류)

공통으로 유지할 토큰

surface.raised (메뉴, --popover)
surface.hover (가리킨 항목)
status.danger (destructive 항목)
radius.lg (메뉴 10px)
radius.md (항목 6px)

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿