Mention Dropdown Menu
Available in Start plan
A fully accessible mention dropdown menu for Tiptap editors. Easily mention users with keyboard shortcut support and flexible customization options.
Installation
Add the component via the Tiptap CLI:
npx @tiptap/cli@latest add mention-dropdown-menuComponents
<MentionDropdownMenu />
A prebuilt React component that provides a dropdown menu for mentioning users in Tiptap editors.
Usage
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.