A menu that appears on trigger interaction, displaying a list of actions or options.

Introduction

Dropdowns display a list of actions or options when triggered. Built on Radix UI for accessibility with keyboard navigation, checkbox items, radio groups, and sub-menus.

Installation

import {
Dropdown, DropdownTrigger, DropdownContent, DropdownItem,
DropdownLabel, DropdownSeparator, DropdownShortcut,
} from '@/components/ui/dropdown';

Usage

<Dropdown>
<DropdownTrigger asChild>
  <Button variant="outlined">Open</Button>
</DropdownTrigger>
<DropdownContent>
  <DropdownItem>Action</DropdownItem>
</DropdownContent>
</Dropdown>

Examples

Default

DropdownDefault

import { Button } from '@/components/ui/button';
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownLabel, DropdownSeparator } from '@/components/ui/dropdown';

export default function Component() {
  return (
    <Dropdown>
      <DropdownTrigger asChild><Button variant="outlined">Open Menu</Button></DropdownTrigger>
      <DropdownContent>
        <DropdownLabel>My Account</DropdownLabel>
        <DropdownSeparator />
        <DropdownItem>Profile</DropdownItem>
        <DropdownItem>Settings</DropdownItem>
        <DropdownSeparator />
        <DropdownItem>Log out</DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}

With Shortcuts

DropdownWithShortcuts

import { Button } from '@/components/ui/button';
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownShortcut } from '@/components/ui/dropdown';

export default function Component() {
  return (
    <Dropdown>
      <DropdownTrigger asChild><Button variant="outlined">Actions</Button></DropdownTrigger>
      <DropdownContent className="w-56">
        <DropdownItem>New Tab <DropdownShortcut>⌘T</DropdownShortcut></DropdownItem>
        <DropdownItem>Copy <DropdownShortcut>⌘C</DropdownShortcut></DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}

Disabled Items

DropdownDisabledItems

import { Button } from '@/components/ui/button';
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownSeparator } from '@/components/ui/dropdown';

export default function Component() {
  return (
    <Dropdown>
      <DropdownTrigger asChild><Button variant="outlined">Options</Button></DropdownTrigger>
      <DropdownContent>
        <DropdownItem>Edit</DropdownItem>
        <DropdownSeparator />
        <DropdownItem disabled>Archive</DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}

Dark Variant

Use variant="dark" on DropdownContent for a dark-themed dropdown menu.

DropdownDark

'use client';

import { Button } from '@/components/ui/button';
import {
  Dropdown,
  DropdownContent,
  DropdownItem,
  DropdownLabel,
  DropdownSeparator,
  DropdownShortcut,
  DropdownTrigger,
} from '@/components/ui/dropdown';

export function DropdownDefault() {
  return (
    <Dropdown>
      <DropdownTrigger asChild>
        <Button variant='outlined'>Open Menu</Button>
      </DropdownTrigger>
      <DropdownContent>
        <DropdownLabel>My Account</DropdownLabel>
        <DropdownSeparator />
        <DropdownItem>Profile</DropdownItem>
        <DropdownItem>Settings</DropdownItem>
        <DropdownItem>Billing</DropdownItem>
        <DropdownSeparator />
        <DropdownItem>Log out</DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}

export function DropdownWithShortcuts() {
  return (
    <Dropdown>
      <DropdownTrigger asChild>
        <Button variant='outlined'>Actions</Button>
      </DropdownTrigger>
      <DropdownContent className='w-56'>
        <DropdownLabel>Actions</DropdownLabel>
        <DropdownSeparator />
        <DropdownItem>
          New Tab <DropdownShortcut>⌘T</DropdownShortcut>
        </DropdownItem>
        <DropdownItem>
          New Window <DropdownShortcut>⌘N</DropdownShortcut>
        </DropdownItem>
        <DropdownSeparator />
        <DropdownItem>
          Cut <DropdownShortcut>⌘X</DropdownShortcut>
        </DropdownItem>
        <DropdownItem>
          Copy <DropdownShortcut>⌘C</DropdownShortcut>
        </DropdownItem>
        <DropdownItem>
          Paste <DropdownShortcut>⌘V</DropdownShortcut>
        </DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}

export function DropdownDisabledItems() {
  return (
    <Dropdown>
      <DropdownTrigger asChild>
        <Button variant='outlined'>Options</Button>
      </DropdownTrigger>
      <DropdownContent>
        <DropdownItem>Edit</DropdownItem>
        <DropdownItem>Duplicate</DropdownItem>
        <DropdownSeparator />
        <DropdownItem disabled>Archive</DropdownItem>
        <DropdownItem disabled>Move to trash</DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}

export function DropdownDark() {
  return (
    <Dropdown>
      <DropdownTrigger asChild>
        <Button variant='outlined'>Dark Menu</Button>
      </DropdownTrigger>
      <DropdownContent variant='dark'>
        <DropdownLabel>Actions</DropdownLabel>
        <DropdownSeparator />
        <DropdownItem>Action</DropdownItem>
        <DropdownItem>Another action</DropdownItem>
        <DropdownItem>Something else here</DropdownItem>
        <DropdownSeparator />
        <DropdownItem>Separated link</DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}

API Reference

DropdownContent

Prop	Type	Default	Description
`variant`	`default \| dark`	`default`	Color variant
`sideOffset`	`number`	`4`	Distance from trigger
`align`	`start \| center \| end`	`start`	Alignment relative to trigger
`side`	`top \| bottom \| left \| right`	`bottom`	Preferred side

DropdownItem

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Add left padding for alignment
`disabled`	`boolean`	—	Disable the item

Dropdown

On this page