下拉菜单

表示一组操作的菜单，由按钮触发。

查看源代码报告问题在 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 参考

此组件继承自 Dropdown Menu primitive 的 props。

根

包含下拉菜单的所有部分。

触发器

包裹将打开下拉菜单的控件。

触发器图标

一个可选的图标部分。

内容

下拉菜单打开时弹出的组件。

属性	类型	默认值
`尺寸`	`响应式<"1" \| "2">`	`"2"`
`变体`	`"实心" \| "柔和"`	`"实心"`
`颜色`	`枚举`	无默认值
`高对比度`	`布尔值`	无默认值

项目

包含下拉菜单项目的组件。

属性	类型	默认值
`asChild`	`布尔值`	无默认值
`颜色`	`枚举`	无默认值
`快捷键`	`字符串`	无默认值

组

用于将多个 Item 部分分组。

单选框组

用于将多个 RadioItem 部分分组。

单选框项目

可以控制并像单选框一样渲染的项目。

属性	类型	默认值
`颜色`	`枚举`	无默认值

复选框项目

可以控制并像复选框一样渲染的项目。

属性	类型	默认值
`颜色`	`枚举`	无默认值
`快捷键`	`字符串`	无默认值

子菜单

包含子菜单的所有部分。

子菜单触发器

打开子菜单的项目。必须在 DropdownMenu.Sub 内部渲染。

子菜单内容

子菜单打开时弹出的组件。必须在 DropdownMenu.Sub 内部渲染。

示例

尺寸

使用 size 属性来控制尺寸。

<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 属性来自定义下拉菜单的视觉样式。

<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 传递给特定项目以出于语义原因进行覆盖（例如，破坏性操作）。

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

高对比度

使用 highContrast 属性来增加与背景的颜色对比度。

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

上一个Dialog

下一个Hover Card

在 GitHub 上编辑此页面。

概述

主题

布局

排版

组件

实用工具

下拉菜单