---
title: Dropdown Menu
description: Displays a menu to the user — such as a set of actions or functions — triggered by a button.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="radix-dropdown-menu-demo" />

## Installation

<ComponentInstallation name="radix-dropdown-menu" />

## Usage

```tsx
<DropdownMenu>
  <DropdownMenuTrigger>Open Dropdown Menu</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Item 1</DropdownMenuItem>
    <DropdownMenuItem>Item 2</DropdownMenuItem>
    <DropdownMenuItem>Item 3</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

## Examples

### Checkboxes

<ComponentPreview name="radix-dropdown-menu-checkboxes-demo" />

### Radio Group

<ComponentPreview name="radix-dropdown-menu-radio-group-demo" />

## Props

<div className="flex flex-row gap-x-3">
  <ExternalLink
    href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu"
    text="Docs"
  />
  <ExternalLink
    href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference"
    text="API Reference"
  />
</div>

### Animate UI props

#### DropdownMenu

<TypeTable
  type={{
    animateOnHover: {
      description:
        'Whether to animate the dropdown menu focus animation on hover',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    transition: {
      description: 'The transition of the dropdown menu focus animation',
      type: 'Transition',
      required: false,
      default: '{ type: "spring", stiffness: 350, damping: 35 }',
    },
  }}
/>

#### DropdownMenuSubTrigger

<TypeTable
  type={{
    inset: {
      description: 'Whether the dropdown menu sub trigger is inset',
      type: 'boolean',
      required: false,
      default: 'false',
    },
  }}
/>

#### DropdownMenuContent

<TypeTable
  type={{
    transition: {
      description: 'The transition of the dropdown menu content animation',
      type: 'Transition',
      required: false,
      default: '{ duration: 0.2 }',
    },
  }}
/>

#### DropdownMenuItem

<TypeTable
  type={{
    inset: {
      description: 'Whether the dropdown menu item is inset',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    variant: {
      description: 'The variant of the dropdown menu item',
      type: "'default' | 'destructive'",
      required: false,
      default: 'default',
    },
  }}
/>

#### DropdownMenuLabel

<TypeTable
  type={{
    inset: {
      description: 'Whether the dropdown menu label is inset',
      type: 'boolean',
      required: false,
      default: 'false',
    },
  }}
/>

## Credits

- We use [Radix UI](https://www.radix-ui.com/primitives/docs/components/dropdown-menu) for the dropdown menu component.
- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/dropdown-menu) for the dropdown menu style.