Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

下拉菜单

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

View sourceReport an issueView 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 参考

¥API Reference

此组件继承了 下拉菜单基础组件 的属性。

¥This component inherits props from the Dropdown Menu primitive.

根

¥Root

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

¥Contains all the parts of a dropdown menu.

触发器

¥Trigger

封装将打开下拉菜单的控件。

¥Wraps the control that will open the dropdown menu.

触发器图标

¥Trigger Icon

可选图标部分。

¥An optional icon part.

内容

¥Content

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

¥The component that pops out when the dropdown menu is open.

PropTypeDefault
size
Responsive<"1" | "2">
"2"
variant
"solid" | "soft"
"solid"
color
enum
No default value
highContrast
boolean
No default value

标签

¥Label

用于渲染标签。它无法通过方向键获得焦点。

¥Used to render a label. It won't be focusable using arrow keys.

项目

¥Item

包含下拉菜单项的组件。

¥The component that contains the dropdown menu items.

PropTypeDefault
asChild
boolean
No default value
color
enum
No default value
shortcut
string
No default value

组

¥Group

用于对多个 Item 部分进行分组。

¥Used to group multiple Item parts.

RadioGroup

用于对多个 RadioItem 部分进行分组。

¥Used to group multiple RadioItem parts.

RadioItem

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

¥An item that can be controlled and rendered like a radio.

PropTypeDefault
color
enum
No default value

CheckboxItem

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

¥An item that can be controlled and rendered like a checkbox.

PropTypeDefault
color
enum
No default value
shortcut
string
No default value

Sub

包含子菜单的所有部分。

¥Contains all the parts of a submenu.

SubTrigger

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

¥An item that opens a submenu. Must be rendered inside DropdownMenu.Sub.

SubContent

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

¥The component that pops out when a submenu is open. Must be rendered inside DropdownMenu.Sub.

示例

¥Examples

尺寸

¥Size

使用 size 属性控制大小。

¥Use the size prop to control the 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

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

¥Use the variant prop to customize the visual style of the dropdown menu.

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

¥Use the color prop to assign a specific color. You can also pass color to a specific item to override for semantic reasons (ie. destruction action).

<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 属性增加与背景的颜色对比度。

¥Use the highContrast prop to increase color contrast with the background.

<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>
Previous对话框
Next悬停卡片