下拉菜单

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

View source Report an issue View in Playground

<DropdownMenu.Root>
	<DropdownMenu.Trigger>
		<Button variant="soft">
			选项
			<DropdownMenu.TriggerIcon />
		</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content>
		<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
		<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>

		<DropdownMenu.Sub>
			<DropdownMenu.SubTrigger>更多</DropdownMenu.SubTrigger>
			<DropdownMenu.SubContent>
				<DropdownMenu.Item>移动到项目…</DropdownMenu.Item>
				<DropdownMenu.Item>移动到文件夹…</DropdownMenu.Item>

				<DropdownMenu.Separator />
				<DropdownMenu.Item>高级选项…</DropdownMenu.Item>
			</DropdownMenu.SubContent>
		</DropdownMenu.Sub>

		<DropdownMenu.Separator />
		<DropdownMenu.Item>分享</DropdownMenu.Item>
		<DropdownMenu.Item>添加到收藏夹</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item shortcut="⌘ ⌫" color="red">
			删除
		</DropdownMenu.Item>
	</DropdownMenu.Content>
</DropdownMenu.Root>

API 参考

该组件继承自下拉菜单原语。

根节点

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

触发器

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

触发器图标

一个可选的图标部分。

内容

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

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

项目

包含下拉菜单项的组件。

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

组

用于组合多个 Item 部分。

单选组

用于组合多个 RadioItem 部分。

单选项

可以像单选按钮一样被控制和渲染的项。

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

复选项

可以像复选框一样被控制和渲染的项。

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

子菜单

包含所有子菜单的部分。

子触发器

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

子内容

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

示例

尺寸

使用 size 属性控制尺寸。

<Flex gap="3" align="center">
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" size="1">
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content size="1">
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>

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

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" size="2">
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content size="2">
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>

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

变体

使用 variant 属性自定义下拉菜单的视觉样式。

<Flex gap="3" align="center">
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="solid">
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="solid">
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>

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

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft">
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="soft">
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>

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

颜色

使用 color 属性分配特定的颜色。您也可以把 color 传递给特定的项以覆盖此行为（例如，销毁操作）。

<Flex gap="3">
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" color="indigo">
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="soft" color="indigo">
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" color="cyan">
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="soft" color="cyan">
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" color="orange">
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="soft" color="orange">
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button variant="soft" color="crimson">
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content variant="soft" color="crimson">
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>
</Flex>

高对比度

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

<Grid columns="2" gap="3" display="inline-grid">
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button color="gray">
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content color="gray">
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button color="gray" highContrast>
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content color="gray" highContrast>
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button color="gray" variant="soft">
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content color="gray" variant="soft">
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>

	<DropdownMenu.Root>
		<DropdownMenu.Trigger>
			<Button color="gray" variant="soft" highContrast>
				选项
				<DropdownMenu.TriggerIcon />
			</Button>
		</DropdownMenu.Trigger>
		<DropdownMenu.Content color="gray" variant="soft" highContrast>
			<DropdownMenu.Item shortcut="⌘ E">编辑</DropdownMenu.Item>
			<DropdownMenu.Item shortcut="⌘ D">重复</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item shortcut="⌘ N">归档</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Root>
</Grid>

上一篇对话框 Dialog

下一篇悬停卡片 Hover Card

在 GitHub 上编辑此页面

概览 Overview

主题 Theme

布局 Layout

排版

组件

通用工具 Utilities

下拉菜单