Dropdown Menu

Displays a menu triggered by a button.

Installation

Add the dropdown menu component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/dropdown-menu.json

Usage

tsx

import { DropdownMenu } from "@/components/ui/dropdown-menu"

Examples

Default

import { CreditCardIcon, SettingsIcon, UserIcon } from "lucide-react"

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

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>Open Menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem><UserIcon />Profile</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>