Dropdown Menu

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/dropdown-menu.tsx. Registry items that depend on it install it automatically.

components/ui/dropdown-menu.tsx

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline">Open</Button>} />
      <DropdownMenuContent>
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Sign out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Examples

Checkboxes and submenus

DropdownMenuCheckboxItem holds a checked state, DropdownMenuLabel titles a group, and DropdownMenuSub nests a second level.

API Reference

The parts wrap Base UI's Menu primitives and accept their props.

DropdownMenu

DropdownMenuProps

open?boolean: Controlled open state.
onOpenChange?(open: boolean) => void: Called when the open state changes.
defaultOpenboolean= false: Uncontrolled initial open state.

DropdownMenuContent

DropdownMenuContentProps

align"start" | "center" | "end"= "center": Alignment against the trigger.
sideOffsetnumber= 4: Distance from the trigger in pixels.

DropdownMenuItem

DropdownMenuItemProps

onSelect?() => void: Called when the item is selected.
disabledboolean= false: Prevents selection and mutes the item.