Dropdown Menu

여러 명령을 버튼 하나로 묶거나 체크 설정과 삭제 같은 동작을 함께 제공할 때 사용합니다.

미리보기

워크스페이스 작업 메뉴

페이지 명령, 제어 상태의 깊이 가이드 체크, 테마 라디오 하위 메뉴, 워크스페이스 삭제 항목을 살펴봅니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/dropdown-menu

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

워크스페이스 작업 메뉴

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/dropdown-menu

Registry JSON

사용법

DropdownMenuTrigger와 DropdownMenuContent를 짝지으세요. 관련 명령은 그룹으로 묶고 체크·라디오 항목이 설정을 나타낸다면 앱 상태와 연결합니다.

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";

export default function Example() {
  const [visible, setVisible] = useState(true);
  return (
    <div>
      <DropdownMenu>
        <DropdownMenuTrigger render={<Button />}>View options</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuCheckboxItem checked={visible} onCheckedChange={setVisible}>Show details</DropdownMenuCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>
      {visible && <p>Project details are visible.</p>}
    </div>
  );
}

API 레퍼런스

Base UI Menu 기반의 완전한 조합 API입니다. 일반 item, checkbox, radio group, label, separator, shortcut, 중첩 submenu를 한 표면 안에서 구성할 수 있습니다.

컴포넌트	속성	타입	기본값	설명
`DropdownMenu`	`open / defaultOpen`	`boolean`	`false`	controlled 또는 초기 uncontrolled 열림 상태입니다.
`DropdownMenu`	`onOpenChange`	`(open: boolean) => void`	`—`	메뉴 열림 상태가 바뀔 때 호출됩니다.
`DropdownMenuTrigger`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	버튼이나 링크에 trigger 동작을 합성합니다.
`DropdownMenuContent`	`side / align`	`"top" \| "right" \| "bottom" \| "left" / "start" \| "center" \| "end"`	`"bottom" / "start"`	trigger를 기준으로 popup 위치를 정합니다.
`DropdownMenuContent`	`sideOffset`	`number`	`8`	trigger와 popup 사이의 간격입니다.
`DropdownMenuItem`	`variant`	`"default" \| "destructive"`	`"default"`	일반 또는 위험 행동 스타일을 선택합니다.
`DropdownMenuItem / Label`	`inset`	`boolean`	`false`	indicator가 있는 행과 텍스트 시작 위치를 맞춥니다.
`DropdownMenuCheckboxItem`	`checked`	`boolean`	`—`	checkbox item의 controlled 상태입니다.
`DropdownMenuCheckboxItem`	`onCheckedChange`	`(checked) => void`	`—`	checkbox item 상태가 바뀔 때 호출됩니다.

미리보기

워크스페이스 작업 메뉴

설치

사용법

API 레퍼런스

접근성