NavigationMenu

NavigationMenu renders a horizontal navigation bar with grouped items and optional flyout content panels. It wraps @radix-ui/react-navigation-menu for keyboard navigation, hover intent, and proper landmark semantics.

#Default usage

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuLink active href="#components">Overview</NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#components">Components</NavigationMenuLink>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="#components">Resources</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

#Import

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@froggdesign/enter-ui-react";

#Accessibility

NavigationMenu inherits Radix NavigationMenu semantics: keyboard navigation, focus restoration, and proper role="navigation" landmarks. Use active on NavigationMenuLink to mark the current page.

#API

• All sub-components forward props to the matching Radix primitives.
• NavigationMenuLink accepts active to apply active styling.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.