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
npx @tiptap/cli@latest add dropdown-menu
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
| 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 |
| Name | Type | Default | Description |
|---|
| asChild | boolean | false | Whether to merge props with child |
| 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 |
| Name | Type | Default | Description |
|---|
| asChild | boolean | false | Whether to merge props with child |