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.
defaultOpen : boolean = false: Uncontrolled initial open state.

DropdownMenuContent

DropdownMenuContentProps

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

DropdownMenuItem

DropdownMenuItemProps

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