Slash Dropdown Menu
Available in Start plan
A fully accessible slash command dropdown menu for Tiptap editors. Quickly insert content, formatting, and AI features by typing "/" and selecting from a context-aware menu with customizable items and grouping.
Installation
Add the component via the Tiptap CLI:
npx @tiptap/cli@latest add slash-dropdown-menuComponents
<SlashDropdownMenu />
A prebuilt React component that provides a slash command interface for quick content insertion and formatting.
Usage
function MySlashMenu() { return ( <SlashDropdownMenu editor={editor} config={{ enabledItems: ['text', 'heading_1', 'heading_2', 'bullet_list', 'quote'], showGroups: true, itemGroups: { text: 'Style', heading_1: 'Style', heading_2: 'Style', bullet_list: 'Lists', quote: 'Style', }, }} /> ) }Props
| Name | Type | Default | Description |
|---|---|---|---|
editor | Editor | null | undefined | The Tiptap editor instance |
config | SlashMenuConfig | undefined | Configuration for menu items and behavior |
Hooks
useSlashDropdownMenu()
A custom hook to build your own slash command menu with full control over items and behavior.
Usage
function MySlashMenu() { const { getSlashMenuItems, config } = useSlashDropdownMenu({ enabledItems: ['text', 'heading_1', 'bullet_list', 'quote'], showGroups: true, customItems: [ { title: 'Custom Item', subtext: 'Custom functionality', aliases: ['custom'], badge: MyIcon, group: 'Custom', onSelect: ({ editor }) => { // Custom action console.log('Custom item selected!') }, }, ], }) // Use with SuggestionMenu or custom implementation return ( <SuggestionMenu char="/" items={({ query, editor }) => filterSuggestionItems(getSlashMenuItems(editor), query)} > {(props) => <MyCustomList {...props} />} </SuggestionMenu> ) }Configuration
The SlashMenuConfig interface supports the following options:
| Name | Type | Description |
|---|---|---|
enabledItems | SlashMenuItemType[] | Array of enabled menu item types |
customItems | SuggestionItem[] | Custom menu items to add |
itemGroups | Record<string, string> | Group assignments for menu items |
showGroups | boolean | Whether to show group labels (default: true) |
Return Values
| Name | Type | Description |
|---|---|---|
getSlashMenuItems | (editor: Editor) => SuggestionItem[] | Function to get available menu items |
config | SlashMenuConfig | The processed configuration object |
Usage Examples
Basic Setup
import { SlashDropdownMenu } from '@/components/tiptap-ui/slash-dropdown-menu' function MyEditor() { return ( <div> <EditorContent editor={editor} /> <SlashDropdownMenu editor={editor} /> </div> ) }Custom Configuration
<SlashDropdownMenu editor={editor} config={{ enabledItems: [ 'text', 'heading_1', 'heading_2', 'bullet_list', 'ordered_list', 'quote', 'code_block', ], showGroups: true, itemGroups: { text: 'Formatting', heading_1: 'Formatting', heading_2: 'Formatting', bullet_list: 'Lists', ordered_list: 'Lists', quote: 'Blocks', code_block: 'Blocks', }, }} />With Custom Items
<SlashDropdownMenu editor={editor} config={{ enabledItems: ['text', 'heading_1', 'bullet_list'], customItems: [ { title: 'Insert Table', subtext: 'Add a data table', aliases: ['table', 'grid'], badge: TableIcon, group: 'Content', onSelect: ({ editor }) => { editor .chain() .focus() .insertTable({ rows: 3, cols: 3, withHeaderRow: true, }) .run() }, }, { title: 'Call to Action', subtext: 'Insert CTA button', aliases: ['cta', 'button'], badge: ButtonIcon, group: 'Content', onSelect: ({ editor }) => { editor.chain().focus().insertContent('<button>Click me</button>').run() }, }, ], }} />Without Groups
<SlashDropdownMenu editor={editor} config={{ enabledItems: ['text', 'heading_1', 'bullet_list', 'quote'], showGroups: false, }} />Keyboard Navigation
The slash dropdown menu supports full keyboard navigation:
- Arrow Keys - Navigate up/down through items
- Enter - Select the highlighted item
- Escape - Close the menu
- Tab - Close menu and continue typing
- Typing - Filter items by search query
Requirements
Dependencies
@tiptap/react- Core Tiptap React integration@tiptap-pro/extension-ai- AI extension for AI functionality@tiptap/extension-mention- Mention extension@tiptap/extension-emoji- Emoji extension
Referenced Components
suggestion-menu(ui-utils)button(primitive)card(primitive)tiptap-utils(lib)code-block-icon(icon)heading-one-icon(icon)heading-two-icon(icon)heading-three-icon(icon)image-icon(icon)list-icon(icon)list-ordered-icon(icon)block-quote-icon(icon)list-todo-icon(icon)ai-sparkles-icon(icon)minus-icon(icon)type-icon(icon)at-sign-icon(icon)smile-plus-icon(icon)