Themes

Advanced

Utils

Context Menu

마우스 오른쪽 클릭이나 길게 누르기 시 표시되는 동작 메뉴입니다.

View source Report an issue View in Playground

Right-click here

<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 primitive의 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을 사용하여 크기를 제어할 수 있습니다.

Size oneRight-click here

Size twoRight-click here

<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을 사용하여 시각적 스타일을 제어할 수 있습니다.

SolidRight-click here

SoftRight-click here

<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를 전달하여 재정의할 수도 있습니다.

IndigoRight-click here

CyanRight-click here

OrangeRight-click here

CrimsonRight-click here

<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을 사용하여 배경과의 색상 대비를 높일 수 있습니다.

StandardRight-click here

High-contrastRight-click here

<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>

PreviousCombobox

NextData List

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities