basecn
Components

Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Docs API Reference

Installation

pnpm dlx shadcn@latest add https://basecn.dev/r/dropdown-menu.json

Migrating from Radix UI

Common Migration Steps

All components share several migration patterns when moving from Radix UI to Base UI. Before proceeding with component-specific changes, review the essential migration patterns.

Familiarizing yourself with these patterns will make the component-specific migration steps much clearer.

Listening to Item Clicks

In Radix UI, you can listen to item clicks by passing a function to the onSelect prop.

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onSelect={() => { console.log("Profile") }}>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

In Base UI, you can do the same by passing a function to the onClick prop.

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuPositioner>
    <DropdownMenuContent>
      <DropdownMenuItem onClick={() => { console.log("Profile") }}>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenuPositioner>
</DropdownMenu>
Docs by Fumadocs
Analytics by Databuddy