Menubar

A horizontal bar of menus, as in a desktop application.

Import
import * as Menubar from '@texuli/primitives/menubar';
Pattern
Menubar (WAI-ARIA APG)
Size budget
22.0 KiB gzip for @texuli/primitives/menubar
Reference
packages/primitives/docs/prim-menubar.md

Live demo

Loading the Menubar demo…

Anatomy

Menubar anatomy: each box holds the parts inside it.
  • Menubar.Root
    • Menubar.Menu
      • Menubar.Trigger
      • Menubar.Portal
        • Menubar.Content
          • Menubar.Item
          • Menubar.CheckboxItem
          • Menubar.RadioGroup
            • Menubar.RadioItem
          • Menubar.Separator
          • Menubar.Sub
            • Menubar.SubTrigger
            • Menubar.SubContent

Behavior checks

tests/behavior/scenarios/menubar.spec.ts runs 12 rows against the Menubar scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 12 rows
  1. a named menubar of menuitems that open menus, collapsed
  2. the menubar is one Tab stop: Tab leaves it from any trigger
  3. ArrowRight and ArrowLeft move between triggers, skipping the disabled one
  4. Enter on a trigger opens its menu on the first item
  5. in an open menu, ArrowRight and ArrowLeft open the next and previous menus
  6. ArrowRight on a submenu trigger opens the submenu; ArrowLeft closes it
  7. Escape closes the menu and returns focus to its trigger
  8. after a click opens one menu, hovering another trigger switches to it
  9. a press outside closes the open menu
  10. Enter on an item runs it and closes the menu
  11. a tap opens a menu and a tap on an item runs it
  12. axe finds no violations with a menu open

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 22.0 KiB gzip for @texuli/primitives/menubar (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).