Add a dropdown menu to Tiptap

A menu that appears when triggered by a button or other control, displaying a list of options.

Install

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

npx @tiptap/cli add dropdown-menu

Manual Integration

For frameworks other than Vite or Next.js, add the primitive 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 {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
} from '@/components/tiptap-ui-primitive/dropdown-menu'
import { Button } from '@/components/tiptap-ui-primitive/button'

export default function MyComponent() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button data-style="ghost">Open Menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuItem asChild>
            <Button data-style="ghost" onClick={() => console.log('Item 1')}>
              Menu Item 1
            </Button>
          </DropdownMenuItem>
          <DropdownMenuItem asChild>
            <Button data-style="ghost" onClick={() => console.log('Item 2')}>
              Menu Item 2
            </Button>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Props

DropdownMenu

Name	Type	Default	Description
open	boolean	undefined	Controlled open state
onOpenChange	(open: boolean) => void	undefined	Callback when open state changes
defaultOpen	boolean	false	Default open state
modal	boolean	true	Whether to render in a modal context

DropdownMenuTrigger

Name	Type	Default	Description
asChild	boolean	false	Whether to merge props with child

DropdownMenuContent

Name	Type	Default	Description
side	'top' \| 'right' \| 'bottom' \| 'left'	'bottom'	Preferred side to display content
align	'start' \| 'center' \| 'end'	'center'	Alignment along the edge
portal	boolean	true	Whether to render in a portal

DropdownMenuItem

Name	Type	Default	Description
asChild	boolean	false	Whether to merge props with child