Dropdown Menu

Dropdown menu triggered by a button

Basic Usage

Basic menu

With checkboxes

With radio items

Installation

pnpm add @corew500/ui

Usage

import { DropdownMenu } from "@corew500/ui/dropdown-menu"

<DropdownMenu>Content</DropdownMenu>

CMS Integration

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

HomepageLast edited 2 hours ago

CMS FieldsEN

Group Label

Delete Label

Action Labels (5)

This simulates how a content editor configures dropdown menu actions in Payload CMS. Labels can be localized.

API Reference

Props

Prop	Type	Default	Description
`defaultOpen`	enum	`false`	Whether the menu is initially open. To render a controlled menu, use the `open` prop instead.
`loopFocus`	enum	`true`	Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys.
`highlightItemOnHover`	enum	`true`	Whether moving the pointer over items should highlight them. Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
`modal`	enum	`true`	Determines if the menu enters a modal state when open. - `true`: user interaction is limited to the menu: document page scroll is locked and pointer interactions on outside elements are disabled. - `false`: user interaction with the rest of the document is allowed.
`onOpenChange`	(open: boolean, eventDetails: MenuRootChangeEventDetails) => void	—	Event handler called when the menu is opened or closed.
`onOpenChangeComplete`	(open: boolean) => void	—	Event handler called after any animations complete when the menu is closed.
`open`	enum	—	Whether the menu is currently open.
`orientation`	enum	`'vertical'`	The visual orientation of the menu. Controls whether roving focus uses up/down or left/right arrow keys.
`disabled`	enum	`false`	Whether the component should ignore user interaction.
`closeParentOnEsc`	enum	`false`	When in a submenu, determines whether pressing the Escape key closes the entire menu, or only the current child menu.
`actionsRef`	RefObject<MenuRootActions>	—	A ref to imperative actions. - `unmount`: When specified, the menu will not be unmounted when closed. Instead, the `unmount` function must be called to unmount the menu manually. Useful when the menu's animation is controlled by an external library. - `close`: When specified, the menu can be closed imperatively.
`triggerId`	string	—	ID of the trigger that the popover is associated with. This is useful in conjunction with the `open` prop to create a controlled popover. There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
`defaultTriggerId`	string	—	ID of the trigger that the popover is associated with. This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.
`handle`	MenuHandle<unknown>	—	A handle to associate the menu with a trigger. If specified, allows external triggers to control the menu's open state.

Accessibility

Keyboard Navigation

- Full keyboard navigation (Arrow keys, Enter, Escape)
Focus management with roving tabindex
Submenus accessible via right arrow key

Screen Readers

ARIA menu role with proper item roles
Checkbox/radio items announce checked state

Localization

Translatable Content

- Pass translated strings to DropdownMenuItem children
DropdownMenuLabel should contain localized group titles

Additional

Keyboard shortcuts in DropdownMenuShortcut are typically not localized

Related Components

DropdownMenuContent