Context Menu

항목이나 영역의 컨텍스트 메뉴 동작으로 관련 명령을 열 때 사용합니다.

미리보기

문서 컨텍스트 작업

문서 도구 영역에서 메뉴를 열어 로컬 실행 취소를 선택하고 세부 설정 체크를 전환합니다.

문서 도구

저장된 상태

미리보기를 불러오는 중입니다.

설치

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

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

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

Registry JSON

사용법

대상을 ContextMenuTrigger로 감싸고 ContextMenuContent에 이름이 명확한 항목을 배치하세요. 중요한 명령은 보이는 버튼 등으로도 실행할 수 있게 제공합니다.

"use client";

import { useState } from "react";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/components/ui/context-menu";

export default function Example() {
  const [message, setMessage] = useState("Right-click the document.");
  return (
    <div>
      <ContextMenu>
        <ContextMenuTrigger className="block p-6">Document</ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem onClick={() => setMessage("Document duplicated.")}>Duplicate</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <p role="status">{message}</p>
    </div>
  );
}

API 레퍼런스

Base UI Context Menu의 포인터 anchoring과 키보드 탐색을 유지하면서 팝업을 floating 뉴모피즘 표면으로 표현합니다. 일반 항목, 체크·라디오 항목, 하위 메뉴와 destructive 상태를 조합할 수 있습니다.

컴포넌트	속성	타입	기본값	설명
`ContextMenu`	`open / onOpenChange`	`boolean / (open: boolean) => void`	`—`	메뉴의 controlled 열림 상태를 관리합니다.
`ContextMenuContent`	`side / align / sideOffset`	`Positioner props`	`—`	포인터 기준 팝업 위치와 간격을 조절합니다.
`ContextMenuItem`	`disabled`	`boolean`	`false`	항목을 보이게 유지하면서 실행할 수 없게 합니다.
`ContextMenuCheckboxItem`	`checked / onCheckedChange`	`boolean / (checked: boolean) => void`	`—`	체크 가능한 메뉴 항목의 상태를 제어합니다.
`ContextMenuRadioGroup`	`value / onValueChange`	`string / (value: string) => void`	`—`	상호 배타적인 라디오 항목의 선택을 제어합니다.

미리보기

문서 컨텍스트 작업

설치

사용법

API 레퍼런스

접근성