Chapter 17: Dropdown Menu

Core Idea

A menu of actions triggered by clicking a button — shares essentially the same anatomy and API surface as ContextMenu, but positions against a Trigger element instead of the pointer location.

Key Concepts

• Anatomy: identical to ContextMenu — Root → Trigger → Portal → Content → Label/Item/Group/CheckboxItem/RadioGroup+RadioItem/Sub+SubTrigger+SubContent/Separator/Arrow.
• Content positions against Trigger: unlike ContextMenu (positions at pointer), DropdownMenu's Content anchors to the Trigger element by default — same side/align/collision props as Popover.
• Arrow: optional pointing-arrow element, must render inside Content, visually links the menu to its trigger.

Code Examples

export const DropdownMenuItemIndicator = React.forwardRef((props, ref) => (
  <DropdownMenuPrimitive.ItemIndicator {...props} ref={ref} />
));

• What it demonstrates: the same "abstract into your own component" pattern used for Dialog — wrap primitive parts once, reuse the wrapper everywhere.

Reference Tables

Part	Notable props
Root	open/onOpenChange, modal (default true), dir
Content	side, align, alignOffset, avoidCollisions, collisionBoundary, collisionPadding, sticky, hideWhenDetached
CheckboxItem	checked (supports "indeterminate"), onCheckedChange

Key Takeaways

1. If you already know ContextMenu's API, DropdownMenu is the same shape with click-trigger positioning instead of pointer positioning — the sub-parts (Item, CheckboxItem, RadioItem, Sub) transfer directly.
2. Use Arrow when the menu needs a clear visual anchor back to its trigger (common in compact toolbars); omit it for full-width or ambiguous-origin menus.
3. Same origin-aware and collision-aware CSS-variable animation techniques as ContextMenu/Popover apply here (--radix-dropdown-menu-content-transform-origin, --radix-dropdown-menu-content-available-*).

Connects To

• Context Menu: near-identical API and part structure, triggered differently.
• Menubar: a persistent horizontal bar composed of several menus like this one.
• Popover: shares the same Content positioning props (side/align/collision handling).