NavigationMenuViewport() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ NavigationMenuViewport() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/radix/ui-rtl/navigation-menu.tsx lines 100–120

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