Pesto UI

Navigation Menu

A site-level navigation row whose items either link straight out or open a panel of links — the marketing-header pattern.

tsx
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  navigationMenuTriggerStyle,
} from "@pestoui/core"

A panel and a plain link

A trigger opens its content in a shared viewport under the row. A link with no panel borrows the trigger's look from navigationMenuTriggerStyle().

Props

PropTypeDefaultDescription
viewportbooleantrueOn NavigationMenu. Renders every panel into one shared, animated viewport. Set false to position each panel under its own trigger.
value / onValueChangestring / (value: string) => void—On NavigationMenu. Controls which item is open.
hrefstring—On NavigationMenuLink. It renders an anchor; pass asChild to hand the link to a router component.
activeboolean—On NavigationMenuLink. Marks the current page and sets aria-current.
navigationMenuTriggerStyle() => string—The trigger's classes, for a link that should match the triggers beside it.
PreviousMulti-selectNext Notification Card

Pesto UI · 117 documented components