[Draft] Introduce the new menu elements #12011

domfarolino · 2025-12-11T16:07:05Z

This PR introduces the <menubar>, <menulist>, and <menuitem> elements as they appear in Open UI's menu elements proposal: https://open-ui.org/components/menu.explainer/. This includes their integration with popovers, command invokers, <fieldset> and checkability, default styles, and variant default styles for the <menulist> element depending on how it is rendered. What has not been spec'd yet is:

Anchor positioning fallback styles
The orientation attribute's effect on default styles and keyboard navigability
Exact keyboard behavior; we plan to follow customizable select's precedent (see [select] keyboard behavior openui/open-ui#1087) of specifying activation behavior, and what happens when you keyboard-navigate away from a menu item (i.e., dismissing <menulist> popovers). But to be consistent with customizable select, we're not planning on specifying the exact keyboard behavior for getting from one menulist to another in a menubar, or traversing through menu items in a menu bar or list. These will be covered by examples, notes, and .optional WPTs
The checked event integration discussed in What event should fire on checkable menu items? openui/open-ui#1321
Figuring out how/if we need to express keyboard type-ahead search (i.e., pressing the a key to focus the first menuitem in a menulist that starts with the character a)
...

This PR is only a draft. It's suitable for stage 2 evaluation of the menu elements proposal tracked by #11729, but has rough edges and non-trivial TODOs. The API shape is just about fully expressed though.

At least two implementers are interested (and none opposed):
- Chromium
- Safari
- Firefox
Tests are written and can be reviewed and commented upon at:
- (in progress) https://github.com/web-platform-tests/wpt/tree/master/html/semantics/menu/tentative
Implementation bugs are filed:
- Chromium: https://issues.chromium.org/issues/406566432
- Gecko: …
- WebKit: …
- Deno (only for timers, structured clone, base64 utils, channel messaging, module resolution, web workers, and web storage): N/A
- Node.js (only for timers, structured clone, base64 utils, channel messaging, and module resolution): N/A
Corresponding HTML AAM & ARIA in HTML issues & PRs:
MDN issue is filed: …
The top of this comment includes a clear commit message to use.

(See WHATWG Working Mode: Changes for more details.)

/dom.html ( diff )
/form-elements.html ( diff )
/grouping-content.html ( diff )
/index.html ( diff )
/indices.html ( diff )
/infrastructure.html ( diff )
/interaction.html ( diff )
/interactive-elements.html ( diff )
/obsolete.html ( diff )
/popover.html ( diff )
/rendering.html ( diff )
/semantics-other.html ( diff )

Note there are a couple open questions in the form of TODOs. For example: 1. Should `popovertargetaction` be allowed to target `<menulist>` elements? Probably, but it could use discussion. 2. Should the attribute change steps that react to `popover` attribute mutations "work" on `<menulist>` elements? This effectively makes the explicit `popover` attribute work on `<menulist>` elements, possibly overriding their default popover behavior. This could also use more discussion. (My preference would be to ignore `popover` on `<menulist>` for now).

This commit moves the command/commandfor attributes into their own section, since they're general to both buttons and menuitem elements. The next steps are: 1. Pull out a shared activation behavior algorithm from the button element, that defines the command-invoking parts that the two elements have in common 2. Add the three new commands 3. Define the menuitem element, and any menuitem-specific things for the commands

These are copied from the main button activation steps's popover handling steps

mtrootyy · 2025-12-14T00:44:20Z

source

+  <p><dfn><code>menuitem</code> element inner content elements</dfn> are the elements which are
+  allowed as descendants of <code>menuitem</code> elements.</p>
+
+  <p>The following are <span><code>option</code> element inner content elements</span>:</p>


<span><code>option</code>

↓

<span><code>menuitem</code>

mtrootyy · 2025-12-14T00:49:15Z

source

+   <dt><span data-x="concept-element-contexts">Contexts in which this element can be used</span>:</dt>
+   <dd>Where <span>flow content</span> is expected.</dd>
+   <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
+   <dd>Zero or more <code>menuitem</code> elements.</dd>


Zero or more menuitem elements.
↓
Zero or more menulist element inner content elements.

mtrootyy · 2025-12-14T00:52:14Z

source

+   <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
+   <dd>Zero or <span><code>menuitem</code> element inner content elements</span>.</dd>
+   <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
+   <dd><span>Global attributes</span></dd>


The "command" & "commandfor" attribute should be added .

mtrootyy · 2025-12-14T00:55:23Z

source

+  <dl class="element">
+   <dt><span data-x="concept-element-categories">Categories</span>:</dt>
+   <dd><span><code>menulist</code> element inner content elements</span>.</dd>
+   <dd>If the element's children include at least one <code>menuitem</code> element: <span>Palpable content</span>.</dd>


Can menuitem element be placed inside menuitem element?

mtrootyy · 2025-12-14T00:57:14Z

source

+   <dd>As a descendant of a <code>menubar</code> element.</dd>
+   <dd>As a descendant of a <code>menulist</code> element.</dd>
+   <dt><span data-x="concept-element-content-model">Content model</span>:</dt>
+   <dd>Zero or <span><code>menuitem</code> element inner content elements</span>.</dd>


<dd>Zero or <span>

↓

<dd>Zero or more <span>

mtrootyy · 2025-12-14T01:27:16Z

source

+  padding-block: 0;
+  padding-inline: 0;
+}
+


I think that it seems necessary to add CSS of "menulist > fieldset > legend".

mtrootyy · 2025-12-14T01:32:37Z

The menubar element & the menulist element is "Interactive content"?

The menubar element & the menulist element should be added to section of "3.2.5.2.2 Flow content" & "3.2.5.2.8 Palpable content".

In section of "4.4.19 The div element";

The "menuitem element inner content elements" should be added to "Categories:".
The "Otherwise, if the element is a descendant of an menuitem element: Zero or more menuitem element inner content elements." should be added to "Content model:".

In section of "4.10.15 The fieldset element";

The "menulist element inner content elements" should be added to "Categories:".
"Content model:" of "if the element is a descendant of a menulist element" should be clarified.

In section of "4.4.2 The hr element";

The "menulist element inner content elements" should be added to "Categories:".

The section of "15.3.12 The fieldset and legend elements" also apply to fieldset & legend elements who is descendant of a menulist element?

mtrootyy · 2025-12-14T05:01:03Z

In section of "4.4.10 The menuitem element";
The following sentence shoud be added as firest sentence of prose.

The menuitem element represents command that the user can invoke, or a sub-menu that the user can trigger.
The menuitem element constitute contents of a menubar element or a menulist element.

In section of "4.4.2 The hr element";

The hr element represents a paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book; alternatively, it represents a separator between a set of options of a select element.

　　↓should change

The hr element represents a paragraph-level thematic break, e.g., a scene change in a story, or a transition to another topic within a section of a reference book; alternatively, it represents a separator between a set of options of a select element; alternatively, it represents a separator between a set of menuitem elements in a menulist element.

In section of "4.10.15 The fieldset element";

The fieldset element represents a set of form controls (or other content) grouped together, optionally with a caption. The caption is given by the first legend element that is a child of the fieldset element, if any. The remainder of the descendants form the group.

　　↓should change

The fieldset element represents a set of form controls (or other content) grouped together, optionally with a caption. The caption is given by the first legend element that is a child of the fieldset element, if any. The remainder of the descendants form the group.
Alternatively, it represents a set of menuitem elements in a menulist element.The label is given by the first legend element that is a child of the fieldset element, if any.

mtrootyy · 2025-12-14T10:38:30Z

source

+}
+
+menulist {
+  display: flex;


If the menulist element is exactly a "native" popover, shouldn't the default of initial state of the menulist element be "display:none"?

At least, the following should be added.

menulist:not(:popover-open) { display:none; }

mtrootyy · 2025-12-16T00:58:31Z

In section of "4.10.16 The legend element";

"Content model:" of "if the element is a descendant of a menulist element" should be clarified.

mtrootyy · 2025-12-16T09:41:46Z

source

+  border-radius: 0.25em;
+  padding: 0.25em;
+}
+


The following should be added;

menubar[orientation="vertical"] { flex-direction: column; }

domfarolino added 12 commits December 5, 2025 11:26

HTMLMenuBarElement

5d1e73e

HTMLMenuListElement basics and popover generalization

a01a345

More menulist default styles

cad7401

Checkedness and fieldset wired up

7f57148

Refactor checkedness for activation path

e2fc6d1

Checkmark styles

1a8423a

More conditional default styles

2726db4

Define menulist command steps

4adb2db

These are copied from the main button activation steps's popover handling steps

Break out the shared command invoker activation steps

4cb7225

Oops fix build

938f3aa

domfarolino added the agenda+ To be discussed at a triage meeting label Dec 11, 2025

mtrootyy reviewed Dec 14, 2025

View reviewed changes

source

padding-block: 0;

padding-inline: 0;

}

Copy link

mtrootyy Dec 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that it seems necessary to add CSS of "menulist > fieldset > legend".

mtrootyy reviewed Dec 14, 2025

View reviewed changes

mtrootyy reviewed Dec 16, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Draft] Introduce the new menu elements #12011

[Draft] Introduce the new menu elements #12011

domfarolino commented Dec 11, 2025 •

edited by pr-preview bot

Loading

Uh oh!

mtrootyy Dec 14, 2025

Uh oh!

mtrootyy Dec 14, 2025

Uh oh!

mtrootyy Dec 14, 2025

Uh oh!

mtrootyy Dec 14, 2025

Uh oh!

mtrootyy Dec 14, 2025

Uh oh!

mtrootyy Dec 14, 2025

Uh oh!

mtrootyy commented Dec 14, 2025

Uh oh!

mtrootyy commented Dec 14, 2025

Uh oh!

mtrootyy Dec 14, 2025 •

edited

Loading

Uh oh!

mtrootyy commented Dec 16, 2025

Uh oh!

mtrootyy Dec 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

[Draft] Introduce the new menu elements #12011

Are you sure you want to change the base?

[Draft] Introduce the new menu elements #12011

Conversation

domfarolino commented Dec 11, 2025 • edited by pr-preview bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mtrootyy Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

mtrootyy Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

mtrootyy Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

mtrootyy Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

mtrootyy Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

mtrootyy Dec 14, 2025

Choose a reason for hiding this comment

Uh oh!

mtrootyy commented Dec 14, 2025

Uh oh!

mtrootyy commented Dec 14, 2025

Uh oh!

mtrootyy Dec 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mtrootyy commented Dec 16, 2025

Uh oh!

mtrootyy Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

domfarolino commented Dec 11, 2025 •

edited by pr-preview bot

Loading

mtrootyy Dec 14, 2025 •

edited

Loading