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
  05d1ea41_5f65_8874_6980_87ea1a2110c7["NavigationMenuViewport()"]
  5bea8d78_b5f7_1bf8_7a92_d91b0ec49022["navigation-menu.tsx"]
  05d1ea41_5f65_8874_6980_87ea1a2110c7 -->|defined in| 5bea8d78_b5f7_1bf8_7a92_d91b0ec49022
  style 05d1ea41_5f65_8874_6980_87ea1a2110c7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/default/ui/navigation-menu.tsx lines 85–96

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