---
title: "Mention Dropdown Menu"
description: "A prebuilt React component that provides a dropdown menu for mentioning users in Tiptap editors."
canonical_url: "https://tiptap.dev/docs/ui-components/components/mention-dropdown-menu"
---

# Mention Dropdown Menu

A prebuilt React component that provides a dropdown menu for mentioning users in Tiptap editors.

A fully accessible mention dropdown menu for Tiptap editors. Easily mention users with keyboard shortcut support and flexible customization options.

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

## Installation

Add the component via the Tiptap CLI:

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

## Components

### `<MentionDropdownMenu />`

A prebuilt React component that provides a dropdown menu for mentioning users in Tiptap editors.

#### Usage

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

// --- Tiptap Core Extensions ---
import { StarterKit } from '@tiptap/starter-kit'
import { Mention } from '@tiptap/extension-mention'

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

// --- Tiptap Node ---
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>Try typing <code>@</code> to open the mention dropdown menu.</p>
        `,
  })

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

#### Props

The `MentionDropdownMenu` inherits all props from [SuggestionMenuProps](https://tiptap.dev/docs/ui-components/utils-components/suggestion-menu.md#props).