컨텍스트 메뉴

오른쪽 클릭이나 길게 누른 지점에 표시되는 일련의 동작을 나타내는 메뉴예요. Context Menu 프리미티브의 props를 상속받아요.

출처: 문서

본문

오른쪽 클릭이나 길게 누른 지점에 표시되는 일련의 동작을 나타내는 메뉴예요.

<ContextMenu.Root>
  <ContextMenu.Trigger>
    <RightClickZone style={{ height: 150 }} />
  </ContextMenu.Trigger>

  <ContextMenu.Content>
    <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

    <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

    <ContextMenu.Separator />

    <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

    <ContextMenu.Sub>
      <ContextMenu.SubTrigger>More</ContextMenu.SubTrigger>

      <ContextMenu.SubContent>
        <ContextMenu.Item>Move to project…</ContextMenu.Item>

        <ContextMenu.Item>Move to folder…</ContextMenu.Item>

        <ContextMenu.Separator />

        <ContextMenu.Item>Advanced options…</ContextMenu.Item>
      </ContextMenu.SubContent>
    </ContextMenu.Sub>

    <ContextMenu.Separator />

    <ContextMenu.Item>Share</ContextMenu.Item>

    <ContextMenu.Item>Add to favorites</ContextMenu.Item>

    <ContextMenu.Separator />

    <ContextMenu.Item shortcut="⌘ ⌫" color="red">
      Delete
    </ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>

API Reference

이 컴포넌트는 Context Menu 프리미티브의 props를 상속받아요.

Root

컨텍스트 메뉴의 모든 부분을 담고 있어요.

Trigger

컨텍스트 메뉴를 열 요소를 감싸요.

Content

컨텍스트 메뉴가 열렸을 때 튀어나오는 컴포넌트예요.

Prop	Type	Default
`size`	`Responsive<"1" \| "2">`	`"2"`
`variant`	`"solid" \| "soft"`	`"solid"`
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value

Label

레이블을 렌더링하는 데 사용해요. 화살표 키로 포커스할 수 없어요.

Item

컨텍스트 메뉴 항목을 담고 있는 컴포넌트예요.

Prop	Type	Default
`asChild`	`boolean`	No default value
`color`	`enum`	No default value
`shortcut`	`string`	No default value

Group

여러 Item 부분을 그룹으로 묶는 데 사용해요.

RadioGroup

여러 RadioItem 부분을 그룹으로 묶는 데 사용해요.

RadioItem

제어할 수 있고 라디오처럼 렌더링되는 항목이에요.

Prop	Type	Default
`color`	`enum`	No default value

CheckboxItem

제어할 수 있고 체크박스처럼 렌더링되는 항목이에요.

Prop	Type	Default
`color`	`enum`	No default value
`shortcut`	`string`	No default value

Sub

서브메뉴의 모든 부분을 담고 있어요.

SubTrigger

서브메뉴를 여는 항목이에요. ContextMenu.Sub 안에 렌더링해야 해요.

SubContent

서브메뉴가 열렸을 때 튀어나오는 컴포넌트예요. ContextMenu.Sub 안에 렌더링해야 해요.

예제 (Examples)

Size

size prop으로 크기를 제어해요.

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Size one" />
    </ContextMenu.Trigger>

    <ContextMenu.Content size="1">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Size two" />
    </ContextMenu.Trigger>

    <ContextMenu.Content size="2">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

Variant

variant prop으로 컨텍스트 메뉴의 시각적 스타일을 커스터마이즈해요.

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Solid" />
    </ContextMenu.Trigger>

    <ContextMenu.Content variant="solid">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Soft" />
    </ContextMenu.Trigger>

    <ContextMenu.Content variant="soft">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

Color

color prop으로 특정 color를 지정해요. 시맨틱한 이유(예: 파괴적 동작)로 특정 항목에 color를 전달해 덮어쓸 수도 있어요.

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Indigo" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="indigo">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Cyan" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="cyan">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Orange" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="orange">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Crimson" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="crimson">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

High-contrast

highContrast prop으로 배경과의 색 대비를 높여요.

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Standard" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="gray">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="High-contrast" />
    </ContextMenu.Trigger>

    <ContextMenu.Content color="gray" highContrast>
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

더 알아보기 (Learn more)

DropdownMenu 컴포넌트 — 버튼으로 여는 메뉴
Context Menu 프리미티브 — 기본 동작 살펴보기

컨텍스트 메뉴