‹ components

Menu

stablev1.0.0·open in canvas

Dropdown action menu on Radix DropdownMenu — items as data, behavior (keyboard, typeahead, dismiss) from the primitive.

Installnpx shadcn add @cids/menu
Live demo

Motion · tap to replay

honors reduced-motion

fade-in preset on open; highlight moves instantly (no per-item animation). Reduced-motion via global reset.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Menu, IconButton } from "@/design-system";

<Menu
  trigger={<IconButton aria-label="Post actions">⋯</IconButton>}
  items={[
    { label: "Copy link", onSelect: copy },
    { kind: "separator" },
    { label: "Delete", onSelect: del, destructive: true },
  ]}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

closedopenitem highlighteditem disableddestructive item.

Dropdown action menu on Radix DropdownMenu — items as data, behavior (keyboard, typeahead, dismiss) from the primitive.

Anatomy

[trigger]
   ┌ Copy link      ┐ ← surface-bright panel, shadow-raised
   │ ───────────────│ ← separator
   │ Delete         │ ← destructive: sell text
   └────────────────┘

Props

PropTypeDefaultNotes
triggerReactNoderequiredRendered asChild — must be focusable (IconButton/Button).
itemsMenuItem[]required{label, onSelect, destructive?, disabled?} or {kind:"separator"}.
align"start" "center" \"end"`"start"Panel alignment to the trigger.
classNamestring—cn-merged onto the panel.

Motion

fade-in preset on open; highlight moves instantly (no per-item animation). Reduced-motion via global reset.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.