---
title: "在 Tiptap 中添加下拉菜单"
description: "使用此 UI 组件将下拉菜单添加到您的 Tiptap 编辑器中。详情请参阅文档！"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/primitives/dropdown-menu"
---

# 在 Tiptap 中添加下拉菜单

使用此 UI 组件将下拉菜单添加到您的 Tiptap 编辑器中。详情请参阅文档！

一个通过按钮或其他控件触发后出现的菜单，显示一组选项列表。

> **Interactive demo:** [dropdown menu](https://template.tiptap.dev/preview/tiptap-ui-primitive/dropdown-menu)

## 安装

您可以通过 Tiptap CLI（针对 Vite 或 Next.js）添加该基础组件

```bash
npx @tiptap/cli@latest add dropdown-menu
```

### 手动集成

对于 Vite 或 Next.js 以外的框架，请从[开源仓库](https://github.com/ueberdosis/tiptap-ui-components/tree/main/apps/web/src/components/tiptap-ui-primitive/dropdown-menu)手动添加该基础组件。

### 导入样式

该组件需要您导入我们添加到 `styles/keyframe-animation.scss` 和 `styles/_variables.scss` 的样式。

## 用法

```tsx
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
} from '@/components/tiptap-ui-primitive/dropdown-menu'
import { Button } from '@/components/tiptap-ui-primitive/button'

export default function MyComponent() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button data-style="ghost">打开菜单</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuItem asChild>
            <Button data-style="ghost" onClick={() => console.log('Item 1')}>
              菜单项 1
            </Button>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <Button data-style="ghost" onClick={() => console.log('Item 2')}>
              菜单项 2
            </Button>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

## 属性

### DropdownMenu

| 名称           | 类型                      | 默认值       | 描述          |
| ------------ | ----------------------- | --------- | ----------- |
| open         | boolean                 | undefined | 控制的打开状态     |
| onOpenChange | (open: boolean) => void | undefined | 打开状态变化时的回调  |
| defaultOpen  | boolean                 | false     | 默认打开状态      |
| modal        | boolean                 | true      | 是否在模态上下文中渲染 |

### DropdownMenuTrigger

| 名称      | 类型      | 默认值   | 描述          |
| ------- | ------- | ----- | ----------- |
| asChild | boolean | false | 是否将属性合并到子元素 |

### DropdownMenuContent

| 名称     | 类型                                     | 默认值      | 描述             |
| ------ | -------------------------------------- | -------- | -------------- |
| side   | 'top' \| 'right' \| 'bottom' \| 'left' | 'bottom' | 显示内容的优先侧       |
| align  | 'start' \| 'center' \| 'end'           | 'center' | 沿边缘的对齐方式       |
| portal | boolean                                | true     | 是否在 portal 中渲染 |

### DropdownMenuItem

| 名称      | 类型      | 默认值   | 描述          |
| ------- | ------- | ----- | ----------- |
| asChild | boolean | false | 是否将属性合并到子元素 |