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/base/dropdown-menu.json

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

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

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

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

Install the following dependencies:

bun add @base-ui/react lucide-react

npm install @base-ui/react lucide-react

pnpm add @base-ui/react lucide-react

yarn add @base-ui/react lucide-react

Copy and paste the following code into your project.

components/ui/dropdown-menu.tsx

"use client";

import { Menu as MenuPrimitive } from "@base-ui/react/menu";
import { CheckIcon, ChevronRightIcon } from "lucide-react";
import type React from "react";
import { cn } from "@/lib/utils";
import { usePreviewPortal } from "@/registry/react/lib/preview-frame";

export const DropdownMenu = (props: MenuPrimitive.Root.Props) => (
  <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
);

export const DropdownMenuPortal = (props: MenuPrimitive.Portal.Props) => (
  <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
);

export const DropdownMenuTrigger = (props: MenuPrimitive.Trigger.Props) => (
  <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />

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

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean, eventDetails: MenuRoot.ChangeEventDetails) → void

actionsRef?React.RefObject<MenuRoot.Actions | null>

children?React.ReactNode | PayloadChildRenderFunction<Payload>

closeParentOnEsc?boolean

defaultTriggerId?string | null

disabled?boolean

handle?MenuHandle<Payload>

highlightItemOnHover?boolean

loopFocus?boolean

onOpenChangeComplete?(open: boolean) → void

orientation?MenuRoot.Orientation

triggerId?string | null

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"dropdown-menu"

data-scope"menu"

data-part"root"

DropdownMenuItem

div

PropType

closeOnClick?boolean

disabled?boolean

id?string

label?string

onClick?BaseUIComponentProps<"div", MenuItemState>["onClick"]

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dropdown-menu-item"

data-scope"menu"

data-part"item"

aria-disabledstring

data-disabled?string

data-highlighted?string

data-inset?string

data-ownedbystring

data-valuestring

data-valuetextstring

data-variant?string

role"menuitem"

DropdownMenuPositioner

div

PropType

align?UseAnchorPositioningSharedParameters["align"]

side?UseAnchorPositioningSharedParameters["side"]

AttributeType

data-scope"menu"

data-part"positioner"

CSS variableType

--anchor-widthstring

--available-heightstring

--transform-originstring

DropdownMenuSeparator

hr

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dropdown-menu-separator"

data-scope"menu"

data-part"separator"

aria-orientation"horizontal"

role"separator"

DropdownMenuTrigger

button

PropType

children?React.ReactNode

closeDelay?number

delay?number

disabled?boolean

handle?MenuHandle<Payload>

openOnHover?boolean

payload?Payload

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"dropdown-menu-trigger"

data-scope"menu"

data-part"trigger"

DropdownMenuPortal

div

PropType

keepMounted?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"dropdown-menu-portal"

data-scope"menu"

data-part"portal"

DropdownMenuContent

div

PropType

children?React.ReactNode

id?string

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dropdown-menu-content"

data-scope"menu"

data-part"popup"

CSS variableType

--anchor-widthstring

--available-heightstring

--transform-originstring

DropdownMenuGroup

div

PropType

children?React.ReactNode

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"dropdown-menu-group"

data-scope"menu"

data-part"group"

DropdownMenuGroupLabel

div

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

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

data-scope"menu"

data-part"group-label"

data-inset?string

DropdownMenuSub

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean, eventDetails: MenuSubmenuRoot.ChangeEventDetails) → void

actionsRef?React.RefObject<MenuRoot.Actions | null>

children?React.ReactNode

closeParentOnEsc?boolean

disabled?boolean

highlightItemOnHover?boolean

loopFocus?boolean

onOpenChangeComplete?(open: boolean) → void

orientation?MenuRoot.Orientation

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"dropdown-menu-sub"

data-scope"menu"

data-part"submenu-root"

DropdownMenuSubTrigger

div

PropType

closeDelay?number

delay?number

disabled?boolean

id?string

label?string

onClick?BaseUIComponentProps<"div", MenuSubmenuTriggerState>["onClick"]

openOnHover?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

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

data-scope"menu"

data-part"submenu-trigger"

data-inset?string

DropdownMenuSubContent

PropType

children?React.ReactNode

id?string

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

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

data-scope"menu"

data-part"root"

DropdownMenuCheckboxItem

div

PropType

checked?boolean

defaultChecked?boolean

onCheckedChange?(checked: boolean, eventDetails: MenuCheckboxItem.ChangeEventDetails) → void

closeOnClick?boolean

disabled?boolean

id?string

label?string

onClick?BaseUIComponentProps<"div", MenuCheckboxItemState>["onClick"]

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dropdown-menu-checkbox-item"

data-scope"menu"

data-part"checkbox-item"

data-inset?string

DropdownMenuRadioGroup

div

PropType

value?any

defaultValue?any

onValueChange?(value: any, eventDetails: MenuRadioGroup.ChangeEventDetails) → void

children?React.ReactNode

disabled?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"dropdown-menu-radio-group"

data-scope"menu"

data-part"radio-group"

DropdownMenuRadioItem

div

PropType

valueany

closeOnClick?boolean

disabled?boolean

id?string

label?string

onClick?BaseUIComponentProps<"div", MenuRadioItemState>["onClick"]

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dropdown-menu-radio-item"

data-scope"menu"

data-part"radio-item"

data-inset?string

DropdownMenuShortcut

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"dropdown-menu-shortcut"

data-scope"menu"

data-part"root"

DropdownMenuLabel

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-scope"menu"

data-part"root"