NavigationMenu

Accessible top-level navigation menu with animated content panels, built on Base UI NavigationMenu.

Category: Navigation — Pattern: Base UI Overlay

Dependency: @base-ui-components/react/navigation-menu

Import

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  NavigationMenuIndicator,
  NavigationMenuViewport,
} from "@hareru/ui"

Exports

Name	Type	Description
`NavigationMenu`	Component	Root context; includes `NavigationMenuViewport` automatically
`NavigationMenuList`	Component	Horizontal list of menu items
`NavigationMenuItem`	Component	Individual menu entry
`NavigationMenuTrigger`	Component	Button that opens the associated content panel
`NavigationMenuContent`	Component	Floating panel displayed below the trigger
`NavigationMenuLink`	Component	Styled anchor link for use inside content panels
`NavigationMenuIndicator`	Component	Animated indicator arrow (included in `NavigationMenu` by default)
`NavigationMenuViewport`	Component	Viewport container for animating content panels (included in `NavigationMenu` by default)

Structure

NavigationMenuList [container] (expected)
- NavigationMenuItem [item] (expected) ×N
  - NavigationMenuTrigger [trigger]
  - NavigationMenuContent [content]
  - NavigationMenuLink [item]
- NavigationMenuIndicator [indicator]
NavigationMenuViewport [viewport]

(expected) = recommended in canonical composition, not runtime-required.

Accessibility

Roles: navigation
Keyboard:
- Arrow keys to navigate menu items
- Enter to activate
- Escape to close submenu
Notes: ARIA navigation pattern provided by Base UI.

Usage

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from "@hareru/ui"

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Menu</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/about">About</NavigationMenuLink>
        <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Notes

NavigationMenu already renders NavigationMenuViewport and NavigationMenuIndicator — do not add them manually.
NavigationMenuLink can also be used with the asChild prop to wrap a router <Link> component.
Content panels are rendered in a shared viewport for smooth cross-item animations.