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]

@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.

[stefanprobst]

@devongovett is a dedicated NavigationMenu component (following the disclosure pattern) on the team's roadmap?

[stefanprobst]

does the official shadcn integration mean this may be in the pipeline after all? looks like shadcn with rac currently supports everything except https://ui.shadcn.com/docs/components/base/menubar and https://ui.shadcn.com/docs/components/base/navigation-menu

[MILLERMARRU]

Confirming what reidbarber said: there's no dedicated Menubar component in react-aria-components, a Toolbar with Menu-triggering buttons inside it is the current recommended shape, and it composes cleanly since Toolbar already handles the horizontal keyboard navigation (arrow keys between items) via useToolbar, while each MenuTrigger handles its own dropdown behavior independently:

<Toolbar aria-label="Main menu" orientation="horizontal">
  <MenuTrigger>
    <Button>File</Button>
    <Popover>
      <Menu onAction={(key) => handleFileAction(key)}>
        <MenuItem id="new">New</MenuItem>
        <MenuItem id="open">Open</MenuItem>
        <SubmenuTrigger>
          <MenuItem id="export">Export</MenuItem>
          <Popover>
            <Menu onAction={(key) => handleExport(key)}>
              <MenuItem id="pdf">PDF</MenuItem>
              <MenuItem id="csv">CSV</MenuItem>
            </Menu>
          </Popover>
        </SubmenuTrigger>
      </Menu>
    </Popover>
  </MenuTrigger>
  <MenuTrigger>
    <Button>Edit</Button>
    <Popover>
      <Menu onAction={(key) => handleEditAction(key)}>
        <MenuItem id="undo">Undo</MenuItem>
        <MenuItem id="redo">Redo</MenuItem>
      </Menu>
    </Popover>
  </MenuTrigger>
</Toolbar>

SubmenuTrigger gives you the horizontal-menu-with-submenus part for free, nested menus open as flyouts off the parent item, same as File > Export above. If you want arrow-key-down-to-open behavior on the top-level Menu buttons (closer to a native OS menubar than a plain toolbar of buttons), that's the one piece Toolbar doesn't hand you automatically, you'd track which trigger is "active" and open the next one on ArrowLeft/ArrowRight yourself, but for most in-app menubars the composition above is what people ship.

[stefanprobst]

• click on "File" => opens "File" menu
• now click on "Edit" => expectation in a menubar is that this will open the "Edit" menu. instead it will just close the "File" menu, so you need to click again to open the "Edit" menu