Tiptap Docs

Select a heading from a menu

A dropdown menu for selecting from multiple heading levels.

Install

You can add the component via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add heading-dropdown-menu

Manual Integration

For frameworks other than Vite or Next.js, add the component manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage 

import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { HeadingDropdownMenu } from '@/components/tiptap-ui/heading-dropdown-menu'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit],
    content: `
          <h1>Heading 1</h1>
          <p>This is a paragraph of text.</p>
          <h2>Heading 2</h2>
          <p>This is another paragraph of text.</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <HeadingDropdownMenu levels={[1, 2, 3, 4]} />
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

Props

NameTypeDefaultDescription
editorEditor | nullnullThe Tiptap editor instance
levelsArray<1 | 2 | 3 | 4 | 5 | 6>[1, 2, 3, 4, 5, 6]The heading levels to include in the dropdown
hideWhenUnavailablebooleanfalseWhether the menu is in a floating context
onOpenChange(isOpen: boolean) => void-Callback when dropdown open state changes

Requirements

Used reference components

  • use-tiptap-editor (hook)
  • tiptap-utils (lib)
  • heading-button (ui)
  • button (primitive)
  • dropdown-menu (primitive)
  • chevron-down-icon (icon)
  • heading-icon (icon)