Menu

A menu button and its menu, with checkbox and radio items and submenus.

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

Live demo

Loading the Menu demo…

Anatomy

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

Behavior checks

tests/behavior/scenarios/menu.spec.ts runs 12 rows against the Menu 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. Enter opens the menu on its first item; the trigger says it is expanded
  2. ArrowUp on the trigger opens the menu on its last item
  3. Home and End move to the first and last items
  4. typing letters moves to the matching item
  5. a checkbox item toggles its checked state and keeps the menu open
  6. radio items check one value in a group named by its heading
  7. ArrowRight opens the submenu on its first item; ArrowLeft returns to its trigger
  8. Escape closes the submenu only and returns focus to its trigger
  9. choosing a submenu item closes every menu and returns focus to the trigger
  10. resting the pointer on the submenu trigger opens the submenu
  11. moving diagonally to the submenu over another item keeps the submenu open
  12. a pointer press outside closes the menu and its open submenu

Limits

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