Navigation Menu

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@tulipfarm/sprout/navigation-menu";

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Projects</NavigationMenuTrigger>
      <NavigationMenuContent>
        <div className="grid w-56 gap-0.5 p-1">
          <NavigationMenuLink href="/projects/meadow">Meadow project</NavigationMenuLink>
          <NavigationMenuLink href="/projects/garden">Garden notes</NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/help">Help</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

An item holds either a NavigationMenuTrigger with its NavigationMenuContent, or a single NavigationMenuLink. Top-level links get the same 32px height as triggers. Set the panel width on the content you put inside it; the popup sizes itself to fit.

Site header

Panels can hold anything: a list of links with icons and descriptions, or a two-column grid that drops to one column on narrow screens. Pass active to mark the current page. Add NavigationMenuIndicator after a trigger for a pointer under the open item, and use navigationMenuTriggerStyle() to give any link the trigger look. Disabled triggers are skipped by pointer and dimmed.

API

NavigationMenu wraps the Base UI navigation menu root and renders the shared popup for you. It takes align ("start", "center", or "end"; default "start"), value, defaultValue, onValueChange, delay, closeDelay, and every navprop.

NavigationMenuTrigger takes disabled and adds a chevron that turns while its panel is open. NavigationMenuContent takeskeepMounted. NavigationMenuLink takes active (sets aria-current="page"), closeOnClick (defaultfalse), and render for your router link.

NavigationMenuPositioner is the portal, positioner, popup, and viewport. The root already renders one with side="bottom", sideOffset 8, alignOffset 0, and collisionPadding 8; use it directly only when composing a root by hand. Each part sets adata-slot.

Accessibility

The root is a nav; give it an aria-label when a page has more than one. Tab moves between items. Enter, Space, or Arrow Down opens a panel and moves focus into it; arrow keys move between links; Escape closes the panel and returns focus to its trigger. Panels also open on hover after a short delay.

The popup fades and scales over 120ms, and resizes and slides between panels over 180ms. Motion turns off when reduced motion is requested. In forced-colors mode the popup keeps a visible border.

Theme tokens

Navigation menus use --sprout-surface, --sprout-line, --sprout-text, --sprout-muted, --sprout-hover, --sprout-active, --sprout-focus, --sprout-shadow-overlay, and the control and panel radii. They need no brand color, so they look the same with the neutral and TulipFarm themes in light and dark mode.