---
title: Dropdown Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
featured: true
component: true
radix:
  link: https://www.radix-ui.com/docs/primitives/components/dropdown-menu
  api: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#api-reference
---

<ComponentExample src="/components/examples/dropdown-menu/demo.tsx">
  <DropdownMenuDemo />
</ComponentExample>

## Installation

```bash
npx shadcn-ui add dropdown-menu
```

<Accordion type="single" collapsible>
  <AccordionItem value="manual-installation">
    <AccordionTrigger>Manual Installation</AccordionTrigger>
    <AccordionContent>

1. Install the `@radix-ui/react-dropdown-menu` component from radix-ui:

```bash
npm install @radix-ui/react-dropdown-menu
```

2. Copy and paste the following code into your project.

<ComponentSource src="/components/ui/dropdown-menu.tsx" />

<Callout>
  This is the `<DropdownMenu />` primitive. You can place it in a file at
  `components/ui/dropdown-menu.tsx`.
</Callout>

    </AccordionContent>

  </AccordionItem>
</Accordion>

## Usage

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

```tsx
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

## Examples

### Checkboxes

<ComponentExample src="/components/examples/dropdown-menu/checkboxes.tsx">
  <DropdownMenuCheckboxes />
</ComponentExample>

### Radio Group

<ComponentExample src="/components/examples/dropdown-menu/radio-group.tsx">
  <DropdownMenuRadioGroupDemo />
</ComponentExample>