NavigationMenuViewport() — ui Function Reference

Architecture documentation for the NavigationMenuViewport() function in navigation-menu.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ NavigationMenuViewport() — ui Function Reference

Dependency Diagram

graph TD
  53f4808a_7372_7a6c_9595_e9df18fb89cf["NavigationMenuViewport()"]
  420dd9d0_1d7e_17e5_4905_f17921511220["navigation-menu.tsx"]
  53f4808a_7372_7a6c_9595_e9df18fb89cf -->|defined in| 420dd9d0_1d7e_17e5_4905_f17921511220
  style 53f4808a_7372_7a6c_9595_e9df18fb89cf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/ui/navigation-menu.tsx lines 102–122

function NavigationMenuViewport({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
  return (
    <div
      className={cn(
        "absolute top-full left-0 isolate z-50 flex justify-center"
      )}
    >
      <NavigationMenuPrimitive.Viewport
        data-slot="navigation-menu-viewport"
        className={cn(
          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
          className
        )}
        {...props}
      />
    </div>
  )
}