WPDS - Action Menu | Components

Anatomy

Note: Image not to scale

Trigger
Item label
Submenu indicator
Group label
Group divider
Item icon (optional)
Selected item
Unselected item

Options

Density

The following options can be applied to specify the density of the items: default, loose, and compact.


Open in Playroom

Trigger

The Action List can be triggered with a button, a link, an icon, or similar visual cue.


Open in Playroom

Behavior

Disabled

Items display background color ‘$faint’ on mouse over

Hover

Items display background color ‘$faint’ on mouse over

Submenu

Action menu supports submenus with up to three levels of nesting. Access a submenu by hovering over a menu item with a submenu indicator (chevron), or by using keyboard navigation

Accessibility

Keyboard controls

Key	Description
Space	When focus is on DropdownMenu.Trigger, opens the dropdown menu and focuses the first item. When focus is on an item, activates the focused item.
Enter	When focus is on DropdownMenu.Trigger, opens the dropdown menu and focuses the first item. When focus is on an item, activates the focused item.
ArrowDown	When focus is on DropdownMenu.Trigger, opens the dropdown menu. When focus is on an item, moves focus to the next item.
ArrowUp	When focus is on an item, moves focus to the previous item.
ArrowRight, ArrowLeft	When focus is on DropdownMenu.SubTrigger, opens or closes the submenu depending on reading direction.
Esc	Closes the dropdown menu and moves focus to DropdownMenu.Trigger.

API Reference

ActionMenuCheckboxItem

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
onSelect		(event: Event) => void	----	False
asChild		enum boolean	----	False
disabled		enum boolean	----	False
textValue		string	----	False
checked		enum CheckedState	----	False
onCheckedChange		(checked: boolean) => void	----	False

ActionMenuContent

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
asChild		enum boolean	----	False
side		enum left \| right \| top \| bottom	----	False
sideOffset		number	----	False
align		enum start \| center \| end	----	False
alignOffset		number	----	False
arrowPadding		number	----	False
collisionBoundary		enum Element \| Element[]	----	False
collisionPadding		enum number \| Partial<Record<left \| right \| top \| bottom, number>>	----	False
sticky		enum partial \| always	----	False
hideWhenDetached		enum boolean	----	False
avoidCollisions		enum boolean	----	False
onCloseAutoFocus	Event handler called when auto-focusing on close. Can be prevented.	(event: Event) => void	----	False
loop	Whether keyboard navigation should loop around @defaultValue false	enum boolean	----	False
onEscapeKeyDown		(event: KeyboardEvent) => void	----	False
onPointerDownOutside		(event: PointerDownOutsideEvent) => void	----	False
onFocusOutside		(event: FocusOutsideEvent) => void	----	False
onInteractOutside		(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void	----	False
forceMount	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.	true	----	False

ActionMenuGroup

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
asChild		enum boolean	----	False

ActionMenuIcon

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
side		enum left \| right	left	False

ActionMenuItem

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
onSelect		(event: Event) => void	----	False
asChild		enum boolean	----	False
disabled		enum boolean	----	False
textValue		string	----	False

ActionMenuItemIndicator

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
asChild		enum boolean	----	False
forceMount	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.	true	----	False

ActionMenuLabel

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
asChild		enum boolean	----	False

ActionMenuPortal

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
forceMount	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.	true	----	False
container		HTMLElement	----	False

ActionMenuRadioGroup

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
asChild		enum boolean	----	False
value		string	----	False
onValueChange		(value: string) => void	----	False

ActionMenuRadioItem

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
onSelect		(event: Event) => void	----	False
asChild		enum boolean	----	False
disabled		enum boolean	----	False
textValue		string	----	False
value		string	----	True

ActionMenuRoot

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	CSS	----	False
density		enum DensityProp	default	False
dir		enum Direction	----	False
open		enum boolean	----	False
defaultOpen		enum boolean	----	False
onOpenChange		(open: boolean) => void	----	False
modal		enum boolean	----	False

ActionMenuSeparator

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
asChild		enum boolean	----	False

ActionMenuSub

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
open		enum boolean	----	False
defaultOpen		enum boolean	----	False
onOpenChange		(open: boolean) => void	----	False

ActionMenuSubContent

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
shadowSize		enum ShadowProp	----	False
asChild		enum boolean	----	False
sideOffset		number	----	False
alignOffset		number	----	False
arrowPadding		number	----	False
collisionBoundary		enum Element \| Element[]	----	False
collisionPadding		enum number \| Partial<Record<left \| right \| top \| bottom, number>>	----	False
sticky		enum partial \| always	----	False
hideWhenDetached		enum boolean	----	False
avoidCollisions		enum boolean	----	False
loop	Whether keyboard navigation should loop around @defaultValue false	enum boolean	----	False
onEscapeKeyDown		(event: KeyboardEvent) => void	----	False
onPointerDownOutside		(event: PointerDownOutsideEvent) => void	----	False
onFocusOutside		(event: FocusOutsideEvent) => void	----	False
onInteractOutside		(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void	----	False
forceMount	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.	true	----	False

ActionMenuSubTrigger

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
onClick		(() => void) & MouseEventHandler<HTMLDivElement>	----	False
asChild		enum boolean	----	False
disabled		enum boolean	----	False
textValue		string	----	False

ActionMenuTrigger

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	WPDS.CSS	----	False
asChild		enum boolean	----	False