NavigationMenu

Site navigation whose items open flyout panels of links.

Import
import { NavigationMenu } from '@texuli/primitives/navigation-menu';
Pattern
Disclosure navigation menu (WAI-ARIA APG)
Size budget
20.0 KiB gzip for @texuli/primitives/navigation-menu
Reference
packages/primitives/docs/prim-navigation-menu.md

Live demo

Loading the NavigationMenu demo…

Anatomy

NavigationMenu anatomy: each box holds the parts inside it.
  • NavigationMenu.Root
    • NavigationMenu.List
      • NavigationMenu.Item
        • NavigationMenu.Trigger
        • NavigationMenu.Content
          • NavigationMenu.Link
      • NavigationMenu.Indicator
    • NavigationMenu.Viewport

Behavior checks

tests/behavior/scenarios/navigation-menu.spec.ts runs 13 rows against the NavigationMenu 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 13 rows
  1. a named navigation landmark whose triggers are collapsed disclosure buttons
  2. a click opens the item and a second click closes it
  3. Enter and Space open the item from the keyboard
  4. Escape from inside the content closes it and returns focus to the trigger
  5. Tab moves from the open trigger into its links, then on to the next trigger
  6. arrow keys move focus between the top-level triggers and links
  7. pressing outside the navigation closes the open item
  8. resting the pointer on a trigger opens its item
  9. choosing a link runs it and closes the item
  10. the active link is the current page
  11. axe finds no violations with an item closed and open
  12. on a touch screen, a tap opens the item and a second tap closes it
  13. a javascript: href never reaches the DOM

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/navigation-menu (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).