Describe the feature

The menubar role supports having top-level menuitem, menuitemcheckbox and menuitemradio elements as well as optionally wrapping those in group elements and optionally separating them with separator elements:

A menuitem element in the menubar can contain a child submenu of menu items. Submenus can be nested several deep.

Down Arrow
If the currently focused menuitem has a submenu, opens the submenu and places focus on the first item in the submenu.

Up Arrow
(Optional) If the currently focused menuitem has a submenu, opens the submenu and places focus on the last item in the submenu.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/menubar_role

The current implementation of menubar only allows its permissible child elements in submenus which unfortunately means we can't create some versions of application toolbars like a text editor (text size may have a dropdown but marks like bold and italic do not).

Having used menubars from other systems in previous projects the naming of the Reka components confused me a little as I was expecting every level beneath the top-level to be considered "sub" so I initially tried something like:

<template>
  <MenubarRoot>
    <MenubarSub>
      <MenubarSubTrigger> Text Size </MenubarSubTrigger>
      <MenubarSubContent>
        <MenubarItem> Heading 1 </MenubarItem>
        <MenubarItem> Heading 2 </MenubarItem>
        <MenubarItem> Heading 3 </MenubarItem>
      </MenubarSubContent>
    </MenubarSub>
    <MenubarSeparator />
    <MenubarGroup>
      <MenubarLabel as-child>
        <VisuallyHidden> Text Formatting </VisuallyHidden>
      </MenubarLabel>
      <MenubarCheckboxItem> Bold </MenubarCheckboxItem>
      <MenubarCheckboxItem> Italic </MenubarCheckboxItem>
    </MenubarGroup>
  </MenubarRoot>
</template>

But found this didn't work at all.

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.