A menu is an essential way to group controls together and provide users the ability to execute commands. There is an existing <menu> element, but it is nothing more than than a "semantic alternative to <ul>", and has no native support to make commands accessible or look and feel cohesive. This proposal introduces new menu elements to be more UI capable and follow the ARIA practices on menubar: <menubar>, <menulist>, <menuitem> elements, and possible <menuitemcheckbox> & <menuitemradio> elements.

Having a flexible menu control will make it easier for web developers to add context menulists, navigation menubars, and better configure the sub-items to choose from. We will leverage existing web platform capabilities such as popover and anchor positioning. Further, this feature improves accessibility experiences by mapping our proposed menu elements to the right ARIA roles, helping screen reader users navigate between commands, and to know when an element is interactive.

Use cases:

• Menu bar
  • A navigation menu bar where users can choose "Settings", "Logout", etc.
  • A horizontal menu bar at the top of a content window; example: text editor with commands "Bold", "Italic", "Underline"
• Context menu
  • A context menu that gets shown on right click, with "Copy", "Paste", and "Translate" commands
  • A filter button that opens a <menulist> to a shopping catalogue where users can check one of "Sort by relevant", "Sort by newest", or "Sort by price"

Proposed design

At a very high level, our proposal lets developers:

1. Add <menubar> elements to their page, with child <menuitem> elements
2. Support submenus by assocating <menuitem>s with nested popover <menulist>s
   • When a user activates this kind of <menuitem>, the nested <menulist> opens
3. Support the context menu use case with <menulist> elements that also contain child <menuitem>s
   • These lists are popovers by default; they will either open at the <menuitem> that invoked it, or at a position set by anchor positioning.
4. Support stateful menu items with the <menuitemradio> and <menuitemcheckbox> elements (see detailed proposal below for discussion about whether two elements are really necessary to achieve this)

Please see our more comprehensive draft proposal at this Google doc. We intend to present this at the next OpenUI meeting; provided there is appetite to pursue this proposal, we will move it to the repository in an explainer format, so that OpenUI can incubate it.

Contributors:

• @dizhang168
• @josepharhar
• @domfarolino