WPDS Documentation & Resources

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

A menu item can be set to ‘disabled’, according to the user’s current context and relevance of option(s).


Open in Playroom

Hover

Items display background color ‘$faint’ on mouse over


Open in Playroom

Select

Action menu items can be made selectable using radio (I.E. only one option permitted) or multi-select functionality. Menu items are selected or deselected via user input. Selected items are visually indicated in bold along with the ([glyph: check]) icon.


Open in Playroom

Submenu

The submenu indicator, ([glyph: chevron-right]) is used to identify items containing a submenu. Action menu supports up to three layers of submenu — level 1 (i.e., root), level 2 and level 3. To access a submenu, hover over the menu item or use keyboard navigation. Each menu level has a specific elevation in the stacking order, corresponding to its place in the nesting hierarchy. Additionally, menu containers for levels 1, 2 and 3 possess individual shadow depths, corresponding to shadow tokens ‘$300, ‘$400’, and ‘$500’, respectively.


Open in Playroom

Guidance

It’s recommended to limit the number of items to no more than five (5) options in a given menu list. Reducing the number of options avoids overwhelming the user and aides in making an accurate selection. If your action menu requires more options, consider using group labels to provide additional visual clarity.

In general, it’s best to place the most frequently used or encouraged options towards the top of the menu list, for easier scannability.

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

ActionMenuPortal

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	any	----	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
forceMount	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.	true	----	False
container		HTMLElement	----	False

ActionMenuRoot

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	any	----	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

ActionMenuSub

Prop	Description	Type	Default	Required
children	Any React node may be used as a child to allow for formatting	any	----	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
open		enum boolean	----	False
defaultOpen		enum boolean	----	False
onOpenChange		(open: boolean) => void	----	False

Action Menu

Table of Contents