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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/ui/navigation-menu.tsx lines 106–126

function NavigationMenuViewport({
  className,
  ...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
  return (
    <div
      className={cn(
        "cn-navigation-menu-viewport-wrapper absolute top-full left-0 isolate z-50 flex justify-center"
      )}
    >
      <NavigationMenuPrimitive.Viewport
        data-slot="navigation-menu-viewport"
        className={cn(
          "cn-navigation-menu-viewport origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden md:w-(--radix-navigation-menu-viewport-width)",
          className
        )}
        {...props}
      />
    </div>
  )
}