[Menubar] Create the Menubar component

[michaldudak]

Preview: https://deploy-preview-1684--base-ui.netlify.app/react/components/menubar

Experiment: https://deploy-preview-1684--base-ui.netlify.app/experiments/menubar

Closes #1407

To do

• modality
• tests
• docs and demos
• vertical orientation
• implementation using CompositeRoot
• data-instant
• Use the released version of Floating UI

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	f4f6563
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/680f30315048820008b28afe
😎 Deploy Preview	https://deploy-preview-1684--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[atomiks]

I notice this has a lot of bugs, wouldn't it be better just to use Composite? This is missing the hover functionality if a menu is already open, but it avoids many issues by default

https://github.com/floating-ui/floating-ui/blob/master/packages/react/test/visual/components/Menubar.tsx

[michaldudak]

I'll see if it's any better, thanks.

[atomiks]

Playing with this, it doesn't seem to make sense not to return focus in a web context. Radix and Ariakit return focus to the trigger. In the OS, menubar has different accessibility semantics most likely regarding where focus is placed, but inside a browser the focus should be restored, otherwise it just restarts at the beginning of the document and loses the context

[atomiks]

Bug:

1. Tab into menubar
2. Hover over any item
3. Should not open

[michaldudak]

Bug:

Tab into menubar
Hover over any item
Should not open

This is by design to follow the pattern from MacOS menubar.

[atomiks]

Hmm, it feels off to me. It's another thing Radix & Ariakit do differently to this, possibly making it different in a web context

cc: @colmtuite

[atomiks]

The Tailwind CSS demo has no transitions. I think it'd be best if the transitions matched macOS: no fade in transition, but a fade out transition (no scaling, though)

[atomiks]

On macOS, the open menu hides itself if you're still within the menubar bounds and not hovering over any trigger, but not if you go below the menubar in the "popups region" 🤔

[michaldudak]

The Tailwind CSS demo has no transitions. I think it'd be best if the transitions matched macOS: no fade in transition, but a fade out transition (no scaling, though)

👍 I updated the demos.

On macOS, the open menu hides itself if you're still within the menubar bounds and not hovering over any trigger, but not if you go below the menubar in the "popups region" 🤔

Right. I don't think it's strictly necessary to replicate this, though.
Let's decide what to do with returning focus and hover behavior first, then we can consider what if this is worth implementing (@colmtuite, I'd love to hear your feedback).

[flaviendelangle]

Screencast.2025-04-23.14.15.17.mp4

On Webstorm (Ubuntu), when I'm focusing an element in the menu and press "Escape", the focus moves back to the menu trigger.

With the Base UI component, is it something we want to have?
I saw that Arrow Left / Arrow Right allowed to move to the next / previous menu, but as a user my first reflex was to press "Escape" first which was a bad idea 😆

[atomiks]

Bug with data-instant

1. Tab to first menu trigger
2. ArrowDown (doesn't happen with Enter)
3. ArrowRight
4. The first menu fades out but shouldn't transition

Bug with data-highlighted

1. Tab to first menu trigger
2. Enter (doesn't happen with ArrowDown)
3. ArrowRight
4. ArrowLeft
5. data-highlighted is on the first menu item but shouldn't be