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 />
    <DropdownMenuSub>
      <DropdownMenuSubTrigger />
      <DropdownMenuSubContent>
        <DropdownMenuGroup>
          <DropdownMenuItem />
        </DropdownMenuGroup>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Default

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

<DropdownMenu>
<DropdownMenuTrigger asChild>
  <Button>Open</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
  <DropdownMenuGroup>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuItem Body="Profile">
      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>

<DropdownMenu><DropdownMenuTrigger asChild>  <Button>Open</Button></DropdownMenuTrigger><DropdownMenuContent>  <DropdownMenuGroup>    <DropdownMenuLabel>My Account</DropdownMenuLabel>    <DropdownMenuItem Body="Profile">      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>    </DropdownMenuItem>  </DropdownMenuGroup></DropdownMenuContent></DropdownMenu>

Checkbox Items

Use DropdownMenuCheckboxItem for toggling options on and off.

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

<DropdownMenu><DropdownMenuTrigger asChild>  <Button>Open</Button></DropdownMenuTrigger><DropdownMenuContent>  <DropdownMenuGroup>    <DropdownMenuLabel>Appearance</DropdownMenuLabel>    <DropdownMenuCheckboxItem      checked={showStatusBar}      onCheckedChange={setShowStatusBar}      Body="Status Bar"    />  </DropdownMenuGroup></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
`asChild`	`boolean`	-	Merges props onto the child element instead of rendering a wrapper.

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
`Body`	`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.
`onSelect`	`(event: Event) => void`	-	Handler called when the item is selected.