# 下拉菜单

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

```jsx
<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 参考](#api-参考)

该组件继承自 [下拉菜单原语](/primitives/docs/components/dropdown-menu)。

### [根节点](#根节点)

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

### [触发器](#触发器)

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

### [触发器图标](#触发器图标)

一个可选的图标部分。

### [内容](#内容)

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

| 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` 属性控制尺寸。

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

```jsx
<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` 属性分配特定的 [颜色](/themes/docs/theme/color)。您也可以把 `color` 传递给特定的项以覆盖此行为（例如，销毁操作）。

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

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

<!--$-->

<!--/$-->