menubar example

[stefanprobst]

there have been some older discussions about this, but not sure what the current recommendation is for a Menubar - Menus in a Toolbar? Horizontal Menu with Submenus?

is there an example or storybook somwhere i could look at? thank you!

[reidbarber]

You can use a Toolbar with buttons that trigger Menus inside.

[stefanprobst]

hmm i guess Toolbar only provides left/right arrow key navigation between menu triggers when no menu is opened. how can i move between menus when one is open? also, when a menu is open i cannot click a menutrigger to open a different one - the click will close the currently open menu, so i have to click again to open the next menu. what's the RAC approach that behaves more like https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/

[cheema-corellian]

so i have to click again to open the next menu

This is exactly what I was struggling with. Spectrum's menus when implemented with Toolbar do not look right. They behave differently from the ARIA example and also how everybody expects them to behave. They require extra clicks to navigate.

[stefanprobst]

@reidbarber is a dedicated Menubar component on the team's roadmap?

[devongovett]

I don't think so. Are you sure this is what you need though? I feel like the only web app where I've seen an actual menu bar is maybe Google Docs? Typical website navigation menus are a different pattern. See https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/

[stefanprobst]

i agree that a Menubar would be overkill in most cases (although other component libraries like Base UI do provide one).

i'd be happy with a RAC NavigationMenu which follows the disclosure pattern - the current RAC Disclosure does not work so well when the panel content is portaled in a popover.