For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
43
Sponsor

Dropdown Menu

PreviousNext

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

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

Installation

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

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu/dropdown-menu";
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Composition

Use the following composition to build a DropdownMenu:

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuLabel
    ├── DropdownMenuGroup
    │   └── DropdownMenuItem
    │       └── DropdownMenuShortcut
    ├── DropdownMenuCheckboxItem
    ├── DropdownMenuRadioGroup
    │   └── DropdownMenuRadioItem
    ├── DropdownMenuSeparator
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent

Examples

Basic

"use client";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,

Submenu

Nest a DropdownMenuSub to create a submenu.

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,

Shortcuts

"use client";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,

Icons

"use client";

import {
  CreditCardIcon,
  LogOutIcon,
  SettingsIcon,

Checkboxes

Use DropdownMenuCheckboxItem for toggleable options.

"use client";

import { useState } from "react";

import { Button } from "@/components/ui/button";
import {

Radio Group

"use client";

import { useState } from "react";

import { Button } from "@/components/ui/button";
import {

Destructive

"use client";

import { PencilIcon, ShareIcon, TrashIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {

Complex

"use client";

import {
  BellIcon,
  CreditCardIcon,
  DownloadIcon,

Checkboxes Icons

"use client";

import { BellIcon, MailIcon, MessageSquareIcon } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";

Radio Icons

"use client";

import { Building2Icon, CreditCardIcon, WalletIcon } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";

Avatar

"use client";

import {
  BadgeCheckIcon,
  BellIcon,
  CreditCardIcon,

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import { CreditCardIcon, SettingsIcon, UserIcon } from "lucide-react";
import * as React from "react";

import { useTranslation } from "@/components/language-selector";

API Reference

See the Base UI documentation for the full API.