Dropdown Menu

Displays a menu of actions or options that the user can choose from, triggered by a button.

Installation

pnpm add @notion-kit/ui

pnpm add @notion-kit/ui

Anatomy

<DropdownMenu>
  <DropdownMenuTrigger />
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel />
      <DropdownMenuItem />
      <DropdownMenuItem />
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuRadioGroup>
      <DropdownMenuRadioItem />
      <DropdownMenuRadioItem />
    </DropdownMenuRadioGroup>
    <DropdownMenuSeparator />
    <DropdownMenuSub>
      <DropdownMenuSubTrigger />
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuItem />
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenuSub>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Default

A dropdown menu with groups, shortcuts, submenus, and a warning item.

<DropdownMenu>
<DropdownMenuTrigger render={<Button>Open</Button>} />
<DropdownMenuContent>
  <DropdownMenuGroup>
    <DropdownMenuLabel title="Account" />
    <DropdownMenuItem label="Profile">
      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>

<DropdownMenu><DropdownMenuTrigger render={<Button>Open</Button>} /><DropdownMenuContent>  <DropdownMenuGroup>    <DropdownMenuLabel title="Account" />    <DropdownMenuItem label="Profile">      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>    </DropdownMenuItem>  </DropdownMenuGroup></DropdownMenuContent></DropdownMenu>

Checkbox Items

Use DropdownMenuCheckboxItem for toggling options on and off.

<DropdownMenu>
<DropdownMenuTrigger render={<Button>Open</Button>} />
<DropdownMenuContent>
  <DropdownMenuGroup>
    <DropdownMenuLabel title="Appearance" />
    <DropdownMenuCheckboxItem
      checked={showStatusBar}
      onCheckedChange={setShowStatusBar}
      label="Status Bar"
    />
  </DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>

<DropdownMenu><DropdownMenuTrigger render={<Button>Open</Button>} /><DropdownMenuContent>  <DropdownMenuGroup>    <DropdownMenuLabel title="Appearance" />    <DropdownMenuCheckboxItem      checked={showStatusBar}      onCheckedChange={setShowStatusBar}      label="Status Bar"    />  </DropdownMenuGroup></DropdownMenuContent></DropdownMenu>

Radio Items

Use DropdownMenuRadioGroup and DropdownMenuRadioItem for mutually exclusive options.

<DropdownMenu>
<DropdownMenuTrigger render={<Button>Open</Button>} />
<DropdownMenuContent>
  <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
    <DropdownMenuLabel title="Position" />
    <DropdownMenuRadioItem value="top" label="Top" />
    <DropdownMenuRadioItem value="bottom" label="Bottom" />
    <DropdownMenuRadioItem value="right" label="Right" />
  </DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>

<DropdownMenu><DropdownMenuTrigger render={<Button>Open</Button>} /><DropdownMenuContent>  <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>    <DropdownMenuLabel title="Position" />    <DropdownMenuRadioItem value="top" label="Top" />    <DropdownMenuRadioItem value="bottom" label="Bottom" />    <DropdownMenuRadioItem value="right" label="Right" />  </DropdownMenuRadioGroup></DropdownMenuContent></DropdownMenu>

API Reference

DropdownMenu

The root component. Wraps the trigger and content.

DropdownMenuTrigger

The element that toggles the dropdown menu.

Prop	Type	Default	Description
`render`	`React.ReactElement \| (props, state) => React.ReactElement`	-	Renders a custom trigger element and merges trigger props onto it.

DropdownMenuContent

The popover panel that appears when the menu is open.

Prop	Type	Default	Description
`sideOffset`	`number`	`4`	Distance in pixels from the trigger.

DropdownMenuItem

A single actionable item in the menu. Extends the shared MenuItem props.

Prop	Type	Default	Description
`label`	`React.ReactNode`	-	The label text or content of the item.
`icon`	`React.ReactNode`	-	An optional leading icon.
`desc`	`string`	-	An optional description below the label.
`variant`	`"default" \| "secondary" \| "sidebar" \| "warning" \| "error"`	`"default"`	The visual style of the item.
`disabled`	`boolean`	-	Whether the item is disabled.
`onClick`	`React.MouseEventHandler<HTMLElement>`	-	Handler called when the item is clicked.

DropdownMenuCheckboxItem

A menu item that can be toggled on and off. Extends DropdownMenuItem props.

Prop	Type	Default	Description
`checked`	`boolean`	-	Whether the item is checked.
`onCheckedChange`	`(checked: boolean) => void`	-	Handler called when the checked state changes.

DropdownMenuRadioGroup

Groups related radio items and manages their mutually exclusive value.

Prop	Type	Default	Description
`value`	`any`	-	The controlled value of the selected radio item.
`defaultValue`	`any`	-	The initially selected value when uncontrolled.
`onValueChange`	`(value: any, eventDetails) => void`	-	Handler called when the selected value changes.
`disabled`	`boolean`	`false`	Whether the group ignores user interaction.

DropdownMenuRadioItem

A menu item representing one value in a DropdownMenuRadioGroup. Extends the shared MenuItem visual props.

Prop	Type	Default	Description
`value`	`any`	-	The value selected when the item is activated.
`label`	`string`	-	The label text of the item.
`icon`	`React.ReactNode`	-	An optional leading icon.
`desc`	`string`	-	An optional description below the label.
`variant`	`"default" \| "secondary" \| "sidebar" \| "warning" \| "error"`	`"default"`	The visual style of the item.
`disabled`	`boolean`	`false`	Whether the item ignores user interaction.
`closeOnClick`	`boolean`	`false`	Whether selecting the item closes the menu.

DropdownMenuLabel

A non-interactive label used to title a group of items.

Prop	Type	Default	Description
`title`	`string`	-	The group label text.

DropdownMenuSeparator

A visual divider between groups of items.

DropdownMenuShortcut

Displays a keyboard shortcut hint aligned to the right of an item.

DropdownMenuGroup

Groups related menu items together with consistent spacing.

DropdownMenuSub

Wraps a sub-menu trigger and its content.

DropdownMenuSubTrigger

A menu item that opens a sub-menu. Accepts the same props as DropdownMenuItem.

Dropdown Menu

On this page