Dropdown Menu

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

Installation

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

Usage

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

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Checkboxes

Use checkbox items to create a menu with selectable options.

API reference

This component is built on top of Radix UI Dropdown Menu. For additional props and API documentation, refer to the Radix documentation.

Changelog

6 July 2026: added explicit "border-border" class