Menubar

A menu bar providing commands and options. It is composed with Menu. The bar has no border. The open item rests on the wash and shifts lightness. Menu rows use the accent dot.

Anatomy

<UiMenubar>
  <UiMenuRoot>
    <UiMenuTrigger>File</UiMenuTrigger>
    <UiMenuPortal>
      <UiMenuPositioner>
        <UiMenuPopup>
          <UiMenuItem>New</UiMenuItem>
        </UiMenuPopup>
      </UiMenuPositioner>
    </UiMenuPortal>
  </UiMenuRoot>
</UiMenubar>

Parts

  • Menubar — role="menubar". orientation defaults to horizontal. loopFocus wraps arrow keys. disabled turns off the bar.
  • Menu — each top-level menu. While one is open, hovering another trigger opens it. Arrow left and right move between menus.

Help in the demo is a disabled menu.