[New Primitive] `Menubar`

[jjenzz]

trafficstars

Following the WAI ARIA pattern documented here.

I imagine it would follow a similar approach to Toolbar in terms of architecture e.g. provide a Menubar.Button that can be composed with DropdownMenu.

Although, do we think that Menubar should always be dropdown menus? if the menubar should never contain a button that actions something straight from the bar, perhaps we would enforce that by exposing wrapped dropdown parts as Menubar.Menu parts. Thoughts?

Proposals:

<Menubar.Root>
  <DropdownMenu.Root>
    <DropdownMenu.Trigger asChild>
      <Menubar.Button />
    </DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Item />
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</Menubar.Root>

<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger />
    <Menubar.Content>
      <Menubar.Item />
    </Menubar.Content>
  </Menubar.Menu>
</Menubar.Root>

https://user-images.githubusercontent.com/175330/152394009-6488db98-3ef1-4ea3-b9ef-126b960997d0.mp4

[benoitgrelard]

I think it should be its own API rather than using DropdownMenu as some behaviour differs in terms of keyboard and pointer events. It will likely be built from Menu though just like ContextMenu and DropdownMenu.

So yeah I'm leaning towards the latter proposal I think.

[jjenzz]

When the menu is open, it seems to behave the same as dropdown menu from what I can see so is there an edge case I'm missing? What would you say the differences are?

The opening is different for sure (hover to open when one is already open etc.), but that could be handled via the dropdown controlled API. So I agree, we would need Menubar.Menu parts for that but could still use dropdown under-the-hood?

[benoitgrelard]

The main differences I quickly see are:

• open menus on hover when one is already open
• pressing right/left on anything that isn't a submenu trigger navigates the top-level menus

There might be other things I'm not seeing/considering.

It might be possible to use DropdownMenu under the hood, but I'm wondering if it's the right thing to do or not, or would make things more difficult for us (3 levels deep) for very little benefits potentially.

We'll have to weigh it up I guess.

[jjenzz]

Everything highlighted so far seems to be what the controlled API is for, including our exposed DOM events like onKeyDown for the right/left keys on items so seems it should be okay.

I created this ticket because @luisorbaiceta was looking for something to pick up. I suggested this might be a good one to make a start on as it seems it is more clearly defined with existing WAI ARIA patterns so maybe he could start (if interested in this one) by recomposing DropdownMenu and then we can review from there?

[benoitgrelard]

That sounds good to me! Like I said, we generally need to try to form a proper opinion anyway, so that's a good way to do it 🙂

[jjenzz]

Agreed, sweet. Well, feel free to take a stab at this one then if interested @luisorbaiceta 💛

[luisorbaiceta]

I'll go for it! 😊

[nhducit]

Following the WAI ARIA pattern documented here.

this link is 404 now, is it moved to this https://w3c.github.io/aria-practices/#menu

[benoitgrelard]

Closed via #1846