Dropdown Menu

v0.4.2

Ready for Production

Catalyst Dropdown Menu extends Radix UI's DropdownMenu primitive with built-in design tokens, CVA size variants, and a danger prop — giving you a production-ready menu with keyboard navigation and accessible focus management out of the box.

Installation

npm install @pmi/catalyst-dropdown-menu

import {
  DropdownMenuRoot,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@pmi/catalyst-dropdown-menu';

Sizes

Three sizes are available: sm, md (default), and lg.

Common Patterns

With Arrow

Use DropdownMenuArrow inside DropdownMenuContent to render a visual pointer toward the trigger.

Account Menu

Account Menu with Profile Header

Help Center Menu

API Reference

Dropdown Menu is a compound component built on Radix UI primitives. The sections below summarize the Catalyst-specific API for each part.

DropdownMenuRoot

Root container that manages open/closed state. Accepts all standard Radix DropdownMenu Root props and forwards ref.

DropdownMenuTrigger

Element that opens the menu. Accepts all standard Radix DropdownMenu Trigger props. Use asChild to render your own element.

DropdownMenuPortal

Renders the menu into a portal. Accepts all standard Radix DropdownMenu Portal props.

DropdownMenuContent

The popover container for menu items. Forwards ref to the underlying element.

Accepts all standard Radix DropdownMenu Content props (side, align, sideOffset, etc.).

DropdownMenuItem

An interactive menu item. Forwards ref to the underlying element.

Accepts all standard Radix DropdownMenu Item props (disabled, onSelect, etc.).

DropdownMenuLabel

A non-interactive label for grouping items. Forwards ref to the underlying element.

DropdownMenuSeparator

A visual divider between groups. Forwards ref to the underlying element.

DropdownMenuSub

Container for a nested submenu. Accepts all standard Radix DropdownMenu Sub props.

DropdownMenuSubTrigger

Trigger for a nested submenu. Forwards ref to the underlying element.

Accepts all standard Radix DropdownMenu SubTrigger props (disabled, etc.).

DropdownMenuSubContent

Content panel for a nested submenu. Forwards ref to the underlying element.

Accepts all standard Radix DropdownMenu SubContent props.

DropdownMenuArrow

Optional visual arrow pointing to the trigger. Forwards ref to the underlying element.

Accessibility

Dropdown Menu is designed to meet WCAG 2.2 AA standards. Keyboard behavior and ARIA semantics are inherited from Radix UI.

Keyboard Interactions

ARIA

• aria-haspopup="menu" and aria-expanded are automatically set on the trigger — inherited from Radix.
• Each menu item has role="menuitem"; disabled items use aria-disabled="true".
• Always provide a visible or visually-hidden label on icon-only triggers (e.g. <span className="sr-only">Show options</span>).
• Group related items with DropdownMenuLabel and DropdownMenuSeparator for screen reader context.

See the Radix DropdownMenu accessibility docs for inherited baseline behavior.

Choosing the Right Component

Use Dropdown Menu when you need a list of actions triggered by a button click. Reach for a different primitive when:

Related

• Context Menu
• Navigation Menu
• Popover
• Select
• Kbd