---
title: "提及用户的下拉菜单"
description: "在您的 Tiptap 编辑器中使用下拉菜单 UI 组件提及其他用户。更多信息请参考我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/components/mention-dropdown-menu"
---

# 提及用户的下拉菜单

在您的 Tiptap 编辑器中使用下拉菜单 UI 组件提及其他用户。更多信息请参考我们的文档！

一个完全集成可访问性的提及用户下拉菜单，适用于 Tiptap 编辑器。支持键盘快捷键，且可灵活定制，轻松提及用户。

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

## 安装

通过 Tiptap CLI 添加该组件：

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

## 组件

### `<MentionDropdownMenu />`

一个预构建的 React 组件，提供在 Tiptap 编辑器中提及用户的下拉菜单。

#### 使用示例

```tsx
import { EditorContent, EditorContext, useEditor } from '@tiptap/react'

// --- Tiptap 核心扩展 ---
import { StarterKit } from '@tiptap/starter-kit'
import { Mention } from '@tiptap/extension-mention'

// --- Tiptap UI ---
import { MentionDropdownMenu } from '@/components/tiptap-ui/mention-dropdown-menu'

// --- Tiptap 节点 ---
import '@/components/tiptap-node/code-block-node/code-block-node.scss'
import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export const MentionDropdownMenuExample = () => {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, Mention],
    content: `
        <p>尝试输入 <code>@</code> 来打开提及下拉菜单。</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <MentionDropdownMenu />
      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}
```

#### 属性

`MentionDropdownMenu` 继承自 [SuggestionMenuProps](https://tiptap.zhcndoc.com/ui-components/utils-components/suggestion-menu.md#props) 的所有属性。