Dropdown Menu React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import DropdownMenu from @/components/ui/dropdown-menu.

import { Copy, Ellipsis, Pencil, Share2, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { DropdownMenu, type MenuEntry } from "@/components/ui/dropdown-menu"

export function ListingActions({ onEdit, onDelete }: { onEdit: () => void; onDelete: () => void }) {
  const items: MenuEntry[] = [
    { label: "Edit", icon: <Pencil />, shortcut: "mod+e", onSelect: onEdit },
    { label: "Duplicate", icon: <Copy />, shortcut: "mod+d" },
    {
      type: "submenu",
      label: "Share",
      icon: <Share2 />,
      items: [{ label: "WhatsApp" }, { label: "Copy link", shortcut: "mod+c" }],
    },
    { type: "separator" },
    // a confirm dialog waits a frame, so focus is back on the trigger when it opens
    { label: "Delete", icon: <Trash2 />, tone: "danger", onSelect: () => requestAnimationFrame(onDelete) },
  ]

  return (
    <DropdownMenu
      align="end"
      items={items}
      title="Pegas city bike"
      description="$420 · Brooklyn"
      trigger={
        <Button variant="ghost" size="icon" radius="full" aria-label="Listing actions">
          <Ellipsis />
        </Button>
      }
    />
  )
}

Props

• defaultOpendefault false
  boolean

  Starts open (uncontrolled). Pass open and onOpenChange instead to control it.

• open
  boolean

  Controlled open state. The root keeps it across the 768px breakpoint, so resizing never closes the menu.

• onOpenChange
  (open: boolean) => void

  Called when the menu opens or closes: the trigger, an item, Escape, an outside click, the sheet's Cancel or a drag.

• items
  MenuEntry[]

  The entries: items ({ label, icon, description, shortcut, badge, onSelect, href, tone: "danger", keepOpen }), { type: "checkbox", checked, onCheckedChange }, { type: "radio", value, onValueChange, options }, { type: "submenu", items }, { type: "group", label, items }, { type: "label" } and { type: "separator" }. Groups and radio sets get separators around them on their own. An onSelect that opens a dialog should wait a frame (requestAnimationFrame) so focus returns to the trigger first. With no enabled entry the trigger is disabled.

• trigger
  ReactNode

  The element that opens it, rendered with asChild: a single element that takes a ref (a Button, an Avatar wrapped in a button). It gets aria-keyshortcuts when a shortcut is set.

• children
  ReactNode

  Extra rows after the items, built from the parts (DropdownMenuItem and friends). They render in the sheet too.

• titledefault ""
  ReactNode

  The action sheet's header on phones, centered and small like iOS (usually what the actions apply to). Not shown on desktop. The demo shows its sample while this is empty.

• descriptiondefault ""
  ReactNode

  A quieter line under the sheet title, linked with aria-describedby. The demo shows its sample while this is empty.

• sheetTitledefault "Actions"
  string

  The sheet's title for screen readers when there is no visible title.

• showCanceldefault true
  boolean

  The sheet's Cancel button at the bottom, where the thumb is. The sheet still closes on a drag, a tap outside or Escape without it.

• cancelLabeldefault "Cancel"
  string

  The label of the sheet's Cancel button.

• backLabeldefault "Back"
  string

  The back row at the top of a submenu page in the sheet.

• sizedefault "md"
  "sm" | "md"

  Item height 32 / 36px with 13 / 14px text and 14 / 16px icons. 44px on touch either way; sheet rows are always 48px.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Panel corners 0 / 12 / 16 / 24px (full falls back to lg). Items keep the panel radius minus its 6px padding, so lg rows are pills.

• minWidthdefault 192
  number

  The panel's minimum width in px. It grows for longer labels up to 384px (and never past the screen), then labels truncate.

• sidedefault "bottom"
  "top" | "right" | "bottom" | "left"

  The side of the trigger it opens on. It flips when there is no room.

• aligndefault "start"
  "start" | "center" | "end"

  How it lines up with the trigger. end suits a ⋯ button at the right edge of a row.

• sideOffsetdefault 8
  number

  The gap between the trigger and the panel, in px.

• loopdefault true
  boolean

  Arrow keys wrap from the last item to the first (desktop and sheet). The demo says which it does.

• modaldefault true
  boolean

  While open, the page behind ignores the pointer and does not scroll (Radix). The sheet on phones is always modal.

• responsivedefault true
  boolean

  Below 768px the menu becomes an action sheet with large rows and submenu pages. Turn it off to keep the floating menu.

• shortcutdefault ""
  string

  A key combo in mod+k notation (⌘ on Apple, Ctrl elsewhere) that opens and closes the menu from anywhere on the page. Empty binds nothing.

• onOpenAutoFocus
  (event: Event) => void

  Sheet only: runs when the action sheet takes focus. Opened with the keyboard it focuses the first row, opened by a tap the sheet itself; preventDefault to focus something else. The desktop menu focuses its first item on a key open (Radix).

• container
  HTMLElement | null

  Portal target for the menu and the sheet (default document.body).

• classNames
  Partial<Record<"content" | "item" | "icon" | "label" | "description" | "shortcut" | "separator" | "sheet", string>>

  Extra classes for the parts: the panel (and sub panels), every row, row icons, labels, descriptions, shortcuts, separators, and the sheet.

• className
  string

  Extra classes for the panel (or the sheet), merged last. Other Radix content props (onCloseAutoFocus, alignOffset, avoidCollisions…) pass through.

Parts

FAQ

Used in

More React overlay components