WFP logoDesign System
Components

Dropdown Menu

View on shadcn/ui

Displays a menu to the user with a list of actions or functions triggered by a button.

Installation

pnpm dlx shadcn@latest add https://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 detailed API documentation, refer to the Radix documentation.

On this page

InstallationUsageExamplesCheckboxesAPI reference