행동과 오버레이@neumorphism-ui/dropdown-menu

Dropdown Menu

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

@neumorphism-ui/dropdown-menu

Registry JSON

미리보기

설치

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

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

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

Import

import * as React from "react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

Example

export function WorkspaceMenu() {
  const [showDepthGrid, setShowDepthGrid] = React.useState(true)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="soft" />}>
        메뉴 열기
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Workspace</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            복제
            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuCheckboxItem
            checked={showDepthGrid}
            onCheckedChange={setShowDepthGrid}
          >
            깊이 격자 표시
          </DropdownMenuCheckboxItem>
          <DropdownMenuItem variant="destructive">삭제</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`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 \| "indeterminate"`	`—`	checkbox item의 controlled 상태입니다.
`DropdownMenuCheckboxItem`	`onCheckedChange`	`(checked) => void`	`—`	checkbox item 상태가 바뀔 때 호출됩니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성