shadcn.io is not affiliated with official shadcn/ui

Shadcn Dropdown Menu for React

List of options on button interaction.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/dropdown-menu.json

npx shadcn@latest add https://kit.dev/r/aria/dropdown-menu.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/dropdown-menu.json

yarn shadcn@latest add https://kit.dev/r/aria/dropdown-menu.json

This component depends on Button. Install it first if you haven't already.

Install the following dependencies:

bun add react-aria-components tailwind-variants lucide-react

npm install react-aria-components tailwind-variants lucide-react

pnpm add react-aria-components tailwind-variants lucide-react

yarn add react-aria-components tailwind-variants lucide-react

Copy and paste the following code into your project.

components/ui/dropdown-menu.tsx

"use client";

import { CheckIcon, ChevronRightIcon } from "lucide-react";
import type React from "react";
import {
  composeRenderProps,
  Header as HeaderPrimitive,
  MenuItem as MenuItemPrimitive,
  type MenuItemProps as MenuItemPrimitiveProps,
  Menu as MenuPrimitive,
  MenuSection as MenuSectionPrimitive,
  type MenuSectionProps as MenuSectionPrimitiveProps,
  MenuTrigger as MenuTriggerPrimitive,
  Popover as PopoverPrimitive,
  Separator as SeparatorPrimitive,
  SubmenuTrigger as SubmenuTriggerPrimitive,
} from "react-aria-components";
import { tv } from "tailwind-variants";

Update the import paths to match your project setup.

Anatomy

DropdownMenu
└── DropdownMenuTrigger
└── DropdownMenuContent
    └── DropdownMenuGroup
        └── DropdownMenuLabel
        └── DropdownMenuItem
        └── DropdownMenuSeparator
        └── DropdownMenuShortcut
        └── DropdownMenuSub
            └── DropdownMenuSubTrigger
            └── DropdownMenuSubContent

Usage

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

<DropdownMenu positioning={{ placement: "bottom-start" }}>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-40">
    <DropdownMenuGroup>
      <DropdownMenuLabel>My Account</DropdownMenuLabel>
      <DropdownMenuItem value="profile">
        Profile
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem value="billing">
        Billing
        <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem value="settings">
        Settings
        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem value="team">Team</DropdownMenuItem>
      <DropdownMenuSub>
        <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
        <DropdownMenuSubContent>
          <DropdownMenuItem value="email">Email</DropdownMenuItem>
          <DropdownMenuItem value="message">Message</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem value="more">More...</DropdownMenuItem>
        </DropdownMenuSubContent>
      </DropdownMenuSub>
      <DropdownMenuItem value="new-team">
        New Team
        <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem value="github">GitHub</DropdownMenuItem>
      <DropdownMenuItem value="support">Support</DropdownMenuItem>
      <DropdownMenuItem disabled value="api">
        API
      </DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem value="logout">
        Log out
        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
      </DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.
`ArrowDown`	Move down.
`ArrowUp`	Move up.
`ArrowLeft`	Move left.
`ArrowRight`	Move right.
`Home`	Go to the start.
`End`	Go to the end.

Demos

Basic

A basic dropdown menu with labels and separators.

PreviewCode

Submenu

Use DropdownMenuSub to nest secondary actions.

PreviewCode

Shortcuts

Add DropdownMenuShortcut to show keyboard hints.

PreviewCode

Icons

Combine icons with labels for quick scanning.

PreviewCode

Checkboxes

Use DropdownMenuCheckboxItem for toggles.

PreviewCode

Checkboxes Icons

Add icons to checkbox items.

PreviewCode

Radio Group

Use DropdownMenuRadioGroup for exclusive choices.

PreviewCode

Radio Icons

Show radio options with icons.

PreviewCode

Destructive

Use variant="destructive" for irreversible actions.

PreviewCode

Avatar

An account switcher dropdown triggered by an avatar.

PreviewCode

Complex

A richer example combining groups, icons, and submenus.

PreviewCode

Rtl

Right-to-left menu. See the RTL configuration guide for document direction.

PreviewCode

API Reference

DropdownMenu

PropType

className?string

AttributeType

data-slot?string

CSS variableType

--trigger-anchor-pointstring

--trigger-widthstring

DropdownMenuTrigger

AttributeType

data-slot"dropdown-menu-trigger"

DropdownMenuGroup

AttributeType

data-slot"dropdown-menu-group"

DropdownMenuGroupLabel

PropType

className?string

AttributeType

data-slot"dropdown-menu-group-label"

data-inset?string

DropdownMenuItem

PropType

className?string

AttributeType

data-slot"dropdown-menu-item"

data-inset?string

data-variant?string

DropdownMenuSub

AttributeType

data-slot"dropdown-menu-sub"

DropdownMenuSubTrigger

PropType

className?string

AttributeType

data-slot"dropdown-menu-sub-trigger"

data-inset?string

DropdownMenuSubContent

PropType

className?string

AttributeType

data-slot"dropdown-menu-sub-content"

DropdownMenuSeparator

PropType

className?string

AttributeType

data-slot"dropdown-menu-separator"

DropdownMenuShortcut

PropType

className?string

AttributeType

data-slot"dropdown-menu-shortcut"