Themes

Advanced

Utils

Dropdown Menu

버튼으로 트리거되는 동작 세트를 나타내는 메뉴입니다.

View source Report an issue View in Playground

<DropdownMenu.Root>
	<DropdownMenu.Trigger>
		<Button variant="soft">
			Options
			<DropdownMenu.TriggerIcon />
		</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content>
		<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
		<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

		<DropdownMenu.Sub>
			<DropdownMenu.SubTrigger>More</DropdownMenu.SubTrigger>
			<DropdownMenu.SubContent>
				<DropdownMenu.Item>Move to project…</DropdownMenu.Item>
				<DropdownMenu.Item>Move to folder…</DropdownMenu.Item>

				<DropdownMenu.Separator />
				<DropdownMenu.Item>Advanced options…</DropdownMenu.Item>
			</DropdownMenu.SubContent>
		</DropdownMenu.Sub>

		<DropdownMenu.Separator />
		<DropdownMenu.Item>Share</DropdownMenu.Item>
		<DropdownMenu.Item>Add to favorites</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item shortcut="⌘ ⌫" color="red">
			Delete
		</DropdownMenu.Item>
	</DropdownMenu.Content>
</DropdownMenu.Root>

API Reference

이 컴포넌트는 Dropdown Menu primitive의 props를 상속받습니다.

Root

드롭다운 메뉴의 모든 부분을 포함합니다.

Trigger

드롭다운 메뉴를 열 컨트롤을 감싸는 래퍼입니다.

Trigger Icon

선택적인 아이콘 부분입니다.

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

서브메뉴를 여는 항목입니다. DropdownMenu.Sub 내에서 렌더링해야 합니다.

SubContent

서브메뉴가 열릴 때 표시되는 컴포넌트입니다. DropdownMenu.Sub 내에서 렌더링해야 합니다.

Examples

Size

size prop을 사용하여 크기를 제어할 수 있습니다.

<Flex gap="3" align="center">
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" size="1">
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content size="1">
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

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

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" size="2">
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content size="2">
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ ⌫" color="red">
				Delete
			</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>
</Flex>

Variant

variant prop을 사용하여 시각적 스타일을 제어할 수 있습니다.

<Flex gap="3" align="center">
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="solid">
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="solid">
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

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

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft">
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="soft">
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ ⌫" color="red">
				Delete
			</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>
</Flex>

Color

color prop을 사용하여 특정 색상을 지정할 수 있습니다. 의미론적인 이유(예: 삭제 동작)로 특정 항목에 color를 전달하여 재정의할 수도 있습니다.

<Flex gap="3">
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" color="indigo">
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="soft" color="indigo">
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" color="cyan">
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="soft" color="cyan">
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" color="orange">
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="soft" color="orange">
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" color="crimson">
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="soft" color="crimson">
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>
</Flex>

High-contrast

highContrast prop을 사용하여 배경과의 색상 대비를 높일 수 있습니다.

<Grid columns="2" gap="3" display="inline-grid">
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button color="gray">
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content color="gray">
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button color="gray" highContrast>
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content color="gray" highContrast>
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button color="gray" variant="soft">
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content color="gray" variant="soft">
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button color="gray" variant="soft" highContrast>
				Options
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content color="gray" variant="soft" highContrast>
			<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>
</Grid>

PreviousDatepicker

NextFile Upload

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities