Related to #49271

We would like to build a mode modular, accessible, and feature-rich (eg. with support for sub-menus) version of the DropdownMenu component.

Given how tricky it can be to implement this feature in an accessible and usable way, we're going to leverage ariakit and its Menu component. We initially tested Radix UI but found some blockers.

Choosing an API approach

After some initial discussion, we've landed on an approach:

• Keep ariakit as an internal implementation detail as much as possible
• Expose as few props as needed
• Expose low-level, granular components, to allow for greater flexibility
• Consider adding as many guidelines, examples, and any other tools to help consumers use the component correctly.

Next steps:

• Create a radix-ui based component (Add new experimental version of DropdownMenu #49473)
  • Add Radix UI as a dependency
  • Experiment with the component and land on an API approach: should we expose low-level, granular components, or high-level components? Should we limit the number of props that we expose from Radix? Should we avoid referencing Radix at all ?
  • Wrap an initial version of the component internal to the components package, and available to other packages in Gutenberg via lock/unlock
• Test and tweak the radix-ui version of the component
  • DropdownMenu: Design feedback #50910
  • DropdownMenu v2: change default placement to match the legacy DropdownMenu component #51133
  • DropdownMenu v2: Render in the default Popover.Slot #51046
  • DropdownMenu v2: tweak styles, add toolbar-specific styles #51097
  • Refine the approach to icon alignment between different menu item types (see comment)
    • Should it be at the group level or at the "content" level ?
  • Accessibility checks in all major Mac OS browsers (Introduce Menu component (aka DropdownMenu v2) #50459 (comment))
• Create an alternative version using ariakit, borrowing as much as possible from the API that we landed on while working on the Radix version (Add new ariakit-based DropdownMenu component #54939)
• Test and tweak the new ariakit-based component
  • DropdownMenu v2: Design tweaks #55933
  • DropdownMenu v2: align component to shared styles and theme variables #50971
  • DropdownMenuV2: inherit placement for nested submenus #56213
  • DropdownMenuV2Ariakit: prevent prefix collapsing if all radios or checkboxes are unselected #56720
  • DropdownMenu V2: add fallback styles for when subgrid is not supported #57327
  • DropdownMenuV2: add GroupLabel subcomponent #64854
  • DropdownMenuV2: break menu item help text on multiple lines for better truncation #63916
  • DropdownMenuV2: use overloaded naming conventions #64654
  • Refactor experimental dropdown menu usages to latest version #55625
  • Delete experimental radix-ui based DropdownMenu component #55626
  • DropdownMenuV2: update animation #64868
  • API tweak (@wordpress/components: high-level API strategy for compound components #63704)
    • Split to more granular sub-components
    • gutter+shift vs offset
    • Collapse empty groups?
  • Menu: use ariakit types #68206
  • Menu: auto-generate README #68249
  • Evaluate portal behaviour (@wordpress/components: portal behavior of popover-based components #63697):
    - does it behave differently (ie. renders inline) when non-modal? Does it make a difference if the popover slot is defined?
    - Should we expose the portal element (similar to inline prop on Popover )?
    - Should we expose the portalElement prop instead of slotName ?
  • useContext needs rethinking
  • Menu: Add "destructive" state #61079
  • Fix Menu component ARIA pattern #67078
  • Evaluate modality (see @wordpress/components: modality of popover-based components #63674)
  • Test: menu, opening a modal, with a menu inside opening a second modal
  • Add more unit tests
  • Known issues:
    • Ariakit.MenuItemRadio not supporting defaultChecked ariakit/ariakit#2914
    • Ariakit.MenuItemCheckbox not supporting defaultChecked ariakit/ariakit#2913
    • MenuItemRadio: support accessing the radio's value ariakit/ariakit#2915
    • MenuItemCheck doesn't populate the values in the menu store on first render ariakit/ariakit#2916
    • DropdownMenu V2: Focus goes out when pressing Tab key #58040
    • DropdownMenuV2: remove flashing styles when moving focus with keyboard #64873
  • DropdownMenuV2: invert animation direction #63443
• Use in the editor:
  • Try to fix Experimental Page List: Ensure sorting by doesn't cover up other drop downs #55169
  • Template actions with DropDownMenuV2 #51043
  • Block Editor Settings: use v2 DropdownMenu #51400
  • Data view: Search & Filtering #55100 (comment)
  • Migrate DropdownMenu instances to Menu #61094
• Publish the component:
  • Understand if there's any chance of replacing the legacy DropdownMenu component via a back-compat layer
  • Apart from DropdownMenu, add back-compat to MenuGroup and MenuItem to render correctly if they detect that they are being rendered as part of DropdownMenuv2 (this could be done via context, having both v1 and v2 dropdowns setting that variable for the menu item and menu group to read)
  • In case back-compat layer is not an option, come up with a well-defined strategy for publishing a new version of the DropdownMenu component (example: "v2" strategy as done for blocks)
  • Come up with a well-defined strategy for namespacing and potentially adding, in the future,
• DropdownMenu: Render in a sheet/drawer on small viewports #57228

This may close #18537