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>

Wrap the owning dropdown root or searchable submenu in DropdownMenuFilter. Place the input outside DropdownMenuList, which contains the groups and actions. The list defaults to max-h-75 overflow-x-hidden overflow-y-auto. Add className only when the menu requires different styling.

<DropdownMenuFilter>
<DropdownMenu>
  <DropdownMenuTrigger render={<Button>Open</Button>} />
  <DropdownMenuContent>
    <DropdownMenuInput aria-label="Search actions" placeholder="Search actions..." />
    <DropdownMenuEmpty>No matches found.</DropdownMenuEmpty>
    <DropdownMenuList>
      <DropdownMenuGroup>
        <DropdownMenuItem label="Profile" />
        <DropdownMenuItem label="Settings" />
      </DropdownMenuGroup>
    </DropdownMenuList>
  </DropdownMenuContent>
</DropdownMenu>
</DropdownMenuFilter>

<DropdownMenuFilter><DropdownMenu>  <DropdownMenuTrigger render={<Button>Open</Button>} />  <DropdownMenuContent>    <DropdownMenuInput aria-label="Search actions" placeholder="Search actions..." />    <DropdownMenuEmpty>No matches found.</DropdownMenuEmpty>    <DropdownMenuList>      <DropdownMenuGroup>        <DropdownMenuItem label="Profile" />        <DropdownMenuItem label="Settings" />      </DropdownMenuGroup>    </DropdownMenuList>  </DropdownMenuContent></DropdownMenu></DropdownMenuFilter>

DropdownMenuFilter forwards Base UI FilterProvider props and uses its defaults. Prefer uncontrolled query state. Pass value and onValueChange when the query also drives application behavior. Use filter={null} when the application renders its own matching rows.

Keep each label inside its DropdownMenuGroup. Filtering automatically hides a group and its label when none of its items match. Clearing the search restores them.

DropdownMenuInput includes native clearing and displays no search icon. Give the input a fixed accessible name.

Base UI renders a filtered popup as a dialog, its input as a searchbox, and its list as a menu. Let the library own these roles and keyboard behavior. The same provider and content work under ContextMenu; wrap each searchable submenu in its own provider.

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>

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.

Dropdown Menu

Installation

Anatomy

Examples

Default

Filtering

Checkbox Items

Radio Items

API Reference

DropdownMenu

DropdownMenuTrigger

DropdownMenuContent

DropdownMenuItem

DropdownMenuCheckboxItem

DropdownMenuRadioGroup

DropdownMenuRadioItem

DropdownMenuLabel

DropdownMenuSeparator

DropdownMenuShortcut

DropdownMenuGroup

DropdownMenuSub

DropdownMenuSubTrigger

On this page