---
title: "Slash Dropdown Menu"
description: "A comprehensive command palette for Tiptap editors with searchable blocks, AI integration, customizable items, keyboard navigation, and intelligent filtering."
canonical_url: "https://tiptap.dev/docs/ui-components/components/slash-dropdown-menu"
---

# Slash Dropdown Menu

A comprehensive command palette for Tiptap editors with searchable blocks, AI integration, customizable items, keyboard navigation, and intelligent filtering.

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.

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

## Installation

Add the component via the Tiptap CLI:

```bash
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

```tsx
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

```tsx
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

```tsx
import { SlashDropdownMenu } from '@/components/tiptap-ui/slash-dropdown-menu'

function MyEditor() {
  return (
    <div>
      <EditorContent editor={editor} />
      <SlashDropdownMenu editor={editor} />
    </div>
  )
}
```

### Custom Configuration

```tsx
<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

```tsx
<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

```tsx
<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)