STRATA

Components / Navigation Menu

Navigation Menu

Header navigation with dropdown panels: the marketing site header is the reference consumer. Triggers read as plain text links; panels morph between items in a shared popover viewport.

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from '@layers/ui/navigation-menu'

Rendered stock

House rules

  • Trigger and Link carry the house plain-text styling (muted, brightening on hover), not the stock pill; navigationMenuTriggerStyle is exported for parity but the house triggers do not use it.
  • The popover itself (Content, Positioner, viewport) is stock shadcn; its morph animation is canonical, do not restyle it.
  • Plain links attach real anchors via render={<a />} (Base UI render prop; there is no asChild).
  • The root renders the shared Positioner viewport itself; never mount your own.