Navigation Menu

A real <nav> of top-level items, each either a plain link or a trigger that opens a mega-menu panel. The panel reuses Dropdown Menu's exact mechanism: popover="auto" for outside-click and Escape dismissal, top-layer stacking, and no client-side positioning logic once CSS anchor positioning is available. It opens on click, not hover, so it behaves the same on a touchscreen as it does with a mouse.

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
} from "@kernelui/react";

function ProductNav() {
  return (
    <NavigationMenu aria-label="Product">
      <NavigationMenuItem>
        <NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink href="/solutions/startups">For Startups</NavigationMenuLink>
          <NavigationMenuLink href="/solutions/enterprise">For Enterprise</NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenu>
  );
}

Props

Accessibility

• The menu is a labelled <nav> landmark; pass a descriptive aria-label.
• Items with no submenu are real <a> elements, so browser navigation, find-in-page, and middle-click all work unmodified.
• Triggers expose aria-haspopup and aria-expanded, kept in sync with the popover's own open state.
• Escape and clicking outside close an open panel natively, via the popover, no extra JavaScript.