Skip to content

Navigation menu

Site navigation with optional flyout panels for product sections and resource links.

Examples

Basic

Overview

Compose list items with triggers and content, then a shared portal popup + viewport. Top-level links without panels use NavigationMenuLink with navigationMenuTriggerClassName.

tsx

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  NavigationMenuPortal,
  NavigationMenuPositioner,
  NavigationMenuPopup,
  NavigationMenuViewport,
} from "@standard-ui/react"

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Product</NavigationMenuTrigger>
      <NavigationMenuContent>{/* links */}</NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
  <NavigationMenuPortal>
    <NavigationMenuPositioner>
      <NavigationMenuPopup>
        <NavigationMenuViewport />
      </NavigationMenuPopup>
    </NavigationMenuPositioner>
  </NavigationMenuPortal>
</NavigationMenu>

API

PartRole
NavigationMenuRoot open state and delay.
NavigationMenuTriggerOpens a panel; includes chevron icon.
NavigationMenuContentPanel body projected into the viewport.
NavigationMenuPopupShared surface that animates width/height.
NavigationMenuLinkLink row; compose with Next.js Link via render.

Guidelines

Do

  • Keep panel content scannable — titles plus one short line
  • Use a plain link item for destinations without a submenu

Don't

  • Don't omit the portal/positioner/popup/viewport tree
  • Don't pack forms or dense tables into nav panels