GitHub

Go to...

Choose a page to open.

A menu of actions that opens from a button.

Dropdown Menu

dropdown-menu-demo

Installation

pnpm dlx shadcn@latest add https://ui.n2020.com/r/dropdown-menu.json

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>Quarterly report</DropdownMenuLabel>
      <DropdownMenuItem>Rename</DropdownMenuItem>
      <DropdownMenuItem>Duplicate</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Put DropdownMenuLabel inside a DropdownMenuGroup. It labels that group.

Examples

Checkboxes

dropdown-menu-checkboxes

Radio group

dropdown-menu-radio