A menu is a way to group menu items together and provide users the ability to execute commands. The existing <menu> element represents a “toolbar” listing of commands, and despite its name, it is not programmatically exposed as a "menu" or "menubar" to accessibility tools, or the web platform. Furthermore, there is no native support to make listed commands look and behave cohesively. New menu elements make it easier for developers to follow ARIA practices on menu and menubar, while taking advantage of new web platform features that underpin menu systems. These elements include `<menubar>`, `<menulist>`, and `<menuitem>` elements. These elements expand on the baseline behaviors popover and anchor positioning provide, and come with expected keyboard navigation behavior out of the box, ensuring consistent experiences for users of all kinds, on the platform they are engaging with.
Menus are a ubiquitous design pattern seen across the web, but they notoriously lack accessibility and consistency. We propose a new set of menu elements that prioritize familiar keyboard navigation behavior and accessibility, and that are built on top of new web platform features to support the menu use case (e.g., popover, anchor positioning, etc).
Explainers: https://open-ui.org/components/menu.explainer https://www.scottohara.me/blog/2021/10/21/menu.html