---
title: "Add a dropdown menu to Tiptap"
description: "Add a dropdown menu into your Tiptap Editor with this UI Component. More in the docs!"
canonical_url: "https://tiptap.dev/docs/ui-components/primitives/dropdown-menu"
---

# Add a dropdown menu to Tiptap

Add a dropdown menu into your Tiptap Editor with this UI Component. More in the docs!

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

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

## Install

You can add the primitive via Tiptap CLI

```bash
npx @tiptap/cli@latest add dropdown-menu
```

## Usage

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