Dropdown Menu

Installation

$ npx shadcn@latest add https://goodui.dev/r/dropdown-menu.json

The file lands in components/goodui/dropdown-menu.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/dropdown-menu works too.

Usage

import { MoreHorizontal, Pencil, Copy, CalendarClock, Trash2 } from "lucide-react"
import { Button } from "@/components/goodui/button"
import { DropdownMenu } from "@/components/goodui/dropdown-menu"

export function BookingActions({ booking }: { booking: { id: string; client: string } }) {
  const [remind, setRemind] = React.useState(true)
  const [status, setStatus] = React.useState("confirmed")
  return (
    <DropdownMenu
      align="end"
      trigger={
        <Button variant="ghost" tone="neutral" size="sm" iconOnly aria-label={`Actions for ${booking.client}`}>
          <MoreHorizontal />
        </Button>
      }
      items={[
        { label: "Edit booking", icon: <Pencil />, shortcut: "Mod+E", onSelect: () => edit(booking.id) },
        { label: "Duplicate", icon: <Copy />, shortcut: "Mod+D", onSelect: () => duplicate(booking.id) },
        {
          type: "sub",
          label: "Reschedule",
          icon: <CalendarClock />,
          items: [
            { label: "Tomorrow, same time", onSelect: () => moveBy(booking.id, 1) },
            { label: "Next week", onSelect: () => moveBy(booking.id, 7) },
          ],
        },
        { type: "separator" },
        { type: "checkbox", id: "remind", label: "Send reminder", checked: remind, onCheckedChange: setRemind },
        {
          type: "radio",
          id: "status",
          label: "Status",
          value: status,
          onValueChange: setStatus,
          options: [
            { value: "confirmed", label: "Confirmed" },
            { value: "pending", label: "Pending deposit" },
          ],
        },
        { type: "separator" },
        { label: "Cancel booking", icon: <Trash2 />, destructive: true, onSelect: () => cancel(booking.id) },
      ]}
    />
  )
}

When to use

Examples

<DropdownMenu
  mode="context"
  items={[
    { label: "New booking here", icon: <CalendarPlus />, onSelect: create },
    { label: "Block this time", onSelect: block },
  ]}
>
  <WeekGrid />
</DropdownMenu>

<DropdownMenu
  bindShortcuts
  label="Export"
  items={[
    { label: "Download PDF", shortcut: "Mod+Shift+F", onSelect: downloadPdf },
    { label: "Email to client", shortcut: "Mod+Shift+E", onSelect: email },
  ]}
/>

<DropdownMenu
  items={items}
  labels={{ trigger: "Aktionen", contextMenu: "Kontextmenü", keyName: (k) => ({ Ctrl: "Strg", Shift: "Umschalt", Del: "Entf" })[k] ?? k }}
/>

API reference

Accessibility

• •Follows the WAI-ARIA menu button pattern: the trigger gets aria-haspopup="menu", aria-expanded and aria-controls; the panel is role="menu" labelled by the trigger (or aria-label).
• •Items are role="menuitem", "menuitemcheckbox" or "menuitemradio" with aria-checked; sub-menu items carry aria-haspopup and aria-expanded; groups are role="group" labelled by their visible label; separators are role="separator".
• •Focus really moves to items (roving focus), so screen readers announce each item. Disabled items stay visible with aria-disabled and are skipped by the arrow keys.
• •Shortcuts are visible keycaps and are exposed as aria-keyshortcuts (Mod becomes Meta on Mac and Control elsewhere).
• •Your trigger element keeps its own name; icon-only triggers need an aria-label. Context menus are named by labels.contextMenu.
• •Menus are portaled to document.body, so overflow: hidden parents never clip them, and they flip and shift to stay in the viewport.

Motion

• •scale (default): the menu fades in from 0.94 scale at the edge facing the trigger on a spring (stiffness 560, damping 36, mass 0.6). fade: 160 ms opacity. slide: moves 8px in from the trigger's side. stagger: items slide in 6px, 24 ms apart, 200 ms each.
• •Menus close with a 100 ms fade. Check marks and radio dots pop in with a short overshoot; the bar highlight grows in 160 ms; the built-in trigger's chevron turns 180°.
• •Reduced motion: menus only fade (100 ms), items do not cascade and CSS transitions are off. Nothing depends on the animation to work.

• •Menus mount only while open. Placement is measured once per open and updated on scroll, resize and size changes, throttled to one animation frame.
• •Item lists are not virtualized; for hundreds of options use combobox.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related