MiHCM
navigation/@mihcm/ui·v0.21.0·stable

NavigationMenu

Top-level site navigation bar with dropdown mega-menus. Animated viewport and indicator via Radix.

ConfiguratorExamplesUsageAccessibilityApi

NavigationMenu -- Accessibility

Keyboard

KeyAction
Tab / Shift+TabMove focus between top-level menu items.
Enter / SpaceActivate a link or toggle a trigger's dropdown content.
ArrowDownOpen the content panel when a trigger is focused.
ArrowLeft / ArrowRightMove focus between sibling menu items.
EscapeClose the currently open content panel and return focus to its trigger.
HomeMove focus to the first menu item.
EndMove focus to the last menu item.

ARIA

  • The root NavigationMenu renders inside a <nav> element, providing an implicit role="navigation" landmark.
  • NavigationMenuList uses role="menubar" to group top-level items.
  • Each NavigationMenuTrigger has aria-expanded reflecting whether its content panel is open.
  • NavigationMenuContent is associated with its trigger via aria-controls and aria-labelledby, so screen readers announce which trigger owns the content.
  • NavigationMenuLink uses standard anchor semantics. Apply aria-current="page" on the link that matches the current route.

Focus management

  • When a trigger opens its content panel, focus remains on the trigger. Users can Tab into the content to reach links inside.
  • Pressing Escape closes the panel and restores focus to the trigger.
  • The content viewport is positioned and layered so focus order flows naturally from the trigger into the panel content and back.
  • Use aria-current="page" on the active link so screen readers announce it as the current page.
  • Visual active state (underline, bold, or color change) should accompany the ARIA attribute for sighted users.

Mobile considerations

  • Touch targets should be at least 44x44px. navigationMenuTriggerStyle() provides adequate padding by default.
  • On narrow viewports, consider replacing the horizontal menu with a hamburger/drawer pattern. The keyboard contract remains the same inside the drawer.
  • Dropdown content panels should not overflow the viewport. Use align="start" or align="end" on NavigationMenuContent when near screen edges.

Native (React Native)

  • Renders as a horizontal ScrollView with Pressable items.
  • No animated viewport -- content renders inline below the trigger.

Best practices

  • Keep top-level items to 5--7 for cognitive load.
  • Use NavigationMenuLink with asChild for proper anchor semantics when wrapping framework-specific link components (e.g., Next.js Link).
  • Mark the current page with aria-current="page".
  • Provide a visible indicator (not just color) for the active link to meet WCAG 1.4.1 (Use of Color).