WPDS - Action Menu | Components

Anatomy

Note: Image not to scale

Trigger
Root
Arrow
Content
Item
Portal
Sub
SubContent
SubTrigger
Group
RadioGroup
RadioItem
CheckboxItem
ItemIndicator
Label
Separator

Options

Trigger

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


Open in Playroom

Density

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


Open in Playroom

Portal

Description of portal

Description of sub menu


Open in Playroom

Behavior

Open

Opens on click


Open in Playroom

Open

Sub navigation hover


Open in Playroom

Guidance

Guidance one

Description of guidance one


Open in Playroom

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

ActionMenu

Prop	Description	Type	Default	Required

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
slider		enum boolean	false	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

StyledCheckboxItem

Prop	Description	Type	Default	Required
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
as	WPDS provides an as prop for changing which tag a component outputs.	never	----	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<{ sm: `(max-width: calc(${string}))`; md: `(min-width: ${string}) and (max-width: calc(${string}))`; lg: `(min-width: ${string}) and (max-width: calc(${string}))`; xl: `(min-width: ${string}) and (max-width: calc(${string}))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notSm: `(min-width: calc(${s...	----	False

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

StyledContent

Prop	Description	Type	Default	Required
asChild		enum boolean	----	False
side		enum bottom \| left \| right \| top	----	False
sideOffset		number	----	False
align		enum center \| end \| start	----	False
alignOffset		number	----	False
arrowPadding		number	----	False
collisionBoundary		enum Element \| Element[]	----	False
collisionPadding		enum number \| Partial<Record<bottom \| left \| right \| top, number>>	----	False
sticky		enum always \| partial	----	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
density		enum loose \| default \| compact	----	False
as	WPDS provides an as prop for changing which tag a component outputs.	never	----	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<{ sm: `(max-width: calc(${string}))`; md: `(min-width: ${string}) and (max-width: calc(${string}))`; lg: `(min-width: ${string}) and (max-width: calc(${string}))`; xl: `(min-width: ${string}) and (max-width: calc(${string}))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notSm: `(min-width: calc(${s...	----	False

ActionMenuContent

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	enum ReactNode	----	False
density		enum DensityProp	----	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 bottom \| left \| right \| top	----	False
sideOffset		number	----	False
align		enum center \| end \| start	----	False
alignOffset		number	----	False
arrowPadding		number	----	False
collisionBoundary		enum Element \| Element[]	----	False
collisionPadding		enum number \| Partial<Record<bottom \| left \| right \| top, number>>	----	False
sticky		enum always \| partial	----	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

StyledGroup

Prop	Description	Type	Default	Required
asChild		enum boolean	----	False
as	WPDS provides an as prop for changing which tag a component outputs.	never	----	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<{ sm: `(max-width: calc(${string}))`; md: `(min-width: ${string}) and (max-width: calc(${string}))`; lg: `(min-width: ${string}) and (max-width: calc(${string}))`; xl: `(min-width: ${string}) and (max-width: calc(${string}))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notSm: `(min-width: calc(${s...	----	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

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

StyledItemIndicator

Prop	Description	Type	Default	Required
asChild		enum boolean	----	False
forceMount	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.	true	----	False
as	WPDS provides an as prop for changing which tag a component outputs.	never	----	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<{ sm: `(max-width: calc(${string}))`; md: `(min-width: ${string}) and (max-width: calc(${string}))`; lg: `(min-width: ${string}) and (max-width: calc(${string}))`; xl: `(min-width: ${string}) and (max-width: calc(${string}))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notSm: `(min-width: calc(${s...	----	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

StyledLabel

Prop	Description	Type	Default	Required
asChild		enum boolean	----	False
as	WPDS provides an as prop for changing which tag a component outputs.	never	----	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<{ sm: `(max-width: calc(${string}))`; md: `(min-width: ${string}) and (max-width: calc(${string}))`; lg: `(min-width: ${string}) and (max-width: calc(${string}))`; xl: `(min-width: ${string}) and (max-width: calc(${string}))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notSm: `(min-width: calc(${s...	----	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

StyledRadioGroup

Prop	Description	Type	Default	Required
asChild		enum boolean	----	False
value		string	----	False
onValueChange		(value: string) => void	----	False
as	WPDS provides an as prop for changing which tag a component outputs.	never	----	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<{ sm: `(max-width: calc(${string}))`; md: `(min-width: ${string}) and (max-width: calc(${string}))`; lg: `(min-width: ${string}) and (max-width: calc(${string}))`; xl: `(min-width: ${string}) and (max-width: calc(${string}))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notSm: `(min-width: calc(${s...	----	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

StyledRadioItem

Prop	Description	Type	Default	Required
onSelect		(event: Event) => void	----	False
asChild		enum boolean	----	False
disabled		enum boolean	----	False
textValue		string	----	False
value		string	----	True
as	WPDS provides an as prop for changing which tag a component outputs.	never	----	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<{ sm: `(max-width: calc(${string}))`; md: `(min-width: ${string}) and (max-width: calc(${string}))`; lg: `(min-width: ${string}) and (max-width: calc(${string}))`; xl: `(min-width: ${string}) and (max-width: calc(${string}))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notSm: `(min-width: calc(${s...	----	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

StyledSeparator

Prop	Description	Type	Default	Required
asChild		enum boolean	----	False
as	WPDS provides an as prop for changing which tag a component outputs.	never	----	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<{ sm: `(max-width: calc(${string}))`; md: `(min-width: ${string}) and (max-width: calc(${string}))`; lg: `(min-width: ${string}) and (max-width: calc(${string}))`; xl: `(min-width: ${string}) and (max-width: calc(${string}))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notSm: `(min-width: calc(${s...	----	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

StyledSub

Prop	Description	Type	Default	Required
open		enum boolean	----	False
defaultOpen		enum boolean	----	False
onOpenChange		(open: boolean) => void	() =>	False
as	WPDS provides an as prop for changing which tag a component outputs.	never	----	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<{ sm: `(max-width: calc(${string}))`; md: `(min-width: ${string}) and (max-width: calc(${string}))`; lg: `(min-width: ${string}) and (max-width: calc(${string}))`; xl: `(min-width: ${string}) and (max-width: calc(${string}))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notSm: `(min-width: calc(${s...	----	False

ActionMenuSub

Prop	Description	Type	Default	Required
onOpenChange		Function & ((open: boolean) => void)	() =>	False
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

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<bottom \| left \| right \| top, number>>	----	False
sticky		enum always \| partial	----	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		Function & MouseEventHandler<HTMLDivElement>	----	False
asChild		enum boolean	----	False
disabled		enum boolean	----	False
textValue		string	----	False

StyledTrigger

Prop	Description	Type	Default	Required
asChild		enum boolean	----	False
as	WPDS provides an as prop for changing which tag a component outputs.	never	----	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<{ sm: `(max-width: calc(${string}))`; md: `(min-width: ${string}) and (max-width: calc(${string}))`; lg: `(min-width: ${string}) and (max-width: calc(${string}))`; xl: `(min-width: ${string}) and (max-width: calc(${string}))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notSm: `(min-width: calc(${s...	----	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

Coming Soon

Anatomy

Options

Trigger

Density

Portal

Sub Menu

Behavior

Open

Open

Guidance

Guidance one

Accessibility

Keyboard controls

API Reference

ActionMenu

ActionMenuRoot

StyledCheckboxItem

ActionMenuCheckboxItem

StyledContent

ActionMenuContent

StyledGroup

ActionMenuGroup

ActionMenuItem

StyledItemIndicator

ActionMenuItemIndicator

StyledLabel

ActionMenuLabel

ActionMenuPortal

StyledRadioGroup

ActionMenuRadioGroup

StyledRadioItem

ActionMenuRadioItem

StyledSeparator

ActionMenuSeparator

StyledSub

ActionMenuSub

ActionMenuSubContent

ActionMenuSubTrigger

StyledTrigger

ActionMenuTrigger