Menubar

UsageCopy Anchor Link

ImportCopy Anchor Link

import { Menubar } from "@qeetrix/ui";

It can also be imported on its own from @qeetrix/ui/components/menubar.

StatesCopy Anchor Link

hover · focus-visible · disabled · checked · open

SupportCopy Anchor Link

AccessibilityCopy Anchor Link

Follows the WAI-ARIA menubar pattern. Not yet audited.

KeyboardCopy Anchor Link

FocusCopy Anchor Link

One Tab stop for the group; arrow keys move between items (roving tab stop). While open, focus is contained and focus returns on close.

Known limitationsCopy Anchor Link

• Semantics: Base UI renders an aria-owns bridge span as a direct child of the role=menubar element while a menu is open, so the menubar owns a generic child and axe's aria-required-children fails. No supported workaround in @base-ui/react 1.7.0: Menu.Positioner throws without Menu.Portal, the bridge is only emitted for non-modal focus managers and Menu.Popup hard-codes modal: isContextMenu, and a role="none" wrapper does not help because axe recurses through presentational wrappers. Asserted in composites.test.tsx and subtracted from a whole-widget axe run in menubar.test.tsx, so a Base UI fix surfaces as a failure.

TestsCopy Anchor Link

Covered by unit, accessibility (axe), interaction and visual tests.