Find out what's new in Tiptap Editor 3.0
Tiptap Docs

Slash Dropdown Menu

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-menu

Components

<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

NameTypeDefaultDescription
editorEditor | nullundefinedThe Tiptap editor instance
configSlashMenuConfigundefinedConfiguration 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:

NameTypeDescription
enabledItemsSlashMenuItemType[]Array of enabled menu item types
customItemsSuggestionItem[]Custom menu items to add
itemGroupsRecord<string, string>Group assignments for menu items
showGroupsbooleanWhether to show group labels (default: true)

Return Values

NameTypeDescription
getSlashMenuItems(editor: Editor) => SuggestionItem[]Function to get available menu items
configSlashMenuConfigThe processed configuration object

Usage Examples

Basic Setup 

import { SlashDropdownMenu } from '@/registry/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)