{ "title": "Navigation Menu", "description": "A collection of links and navigation elements with shared gliding indicator, spring popup scale entrance, and viewport dimension morphing.", "name": "motion-navigation-menu", "dependencies": [ "motion", "@base-ui/react", "class-variance-authority", "lucide-react" ], "registryDependencies": [], "type": "registry:ui", "files": [ { "path": "components/paceui/motion/navigation-menu.tsx", "type": "registry:ui", "content": "import * as React from \"react\";\n\nimport { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\";\nimport { cva } from \"class-variance-authority\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface NavigationMenuHighlightContextType {\n highlightLayoutId: string;\n activeTriggerId: string | null;\n openItemValue: any;\n hasActiveTrigger: boolean;\n isScrolling: boolean;\n setActiveTrigger: (id: string) => void;\n clearActiveTriggerWithDelay: () => void;\n closeMenu: () => void;\n}\n\nconst NavigationMenuHighlightContext = React.createContext(null);\n\nexport const useNavigationMenu = () => React.useContext(NavigationMenuHighlightContext);\n\nexport interface NavigationMenuProps extends NavigationMenuPrimitive.Root.Props {\n positionerProps?: NavigationMenuPositionerProps;\n closeOnScroll?: boolean;\n}\n\nfunction NavigationMenu({\n className,\n children,\n positionerProps,\n onValueChange,\n closeOnScroll = true,\n value: controlledValue,\n ...props\n}: NavigationMenuProps) {\n const generatedLayoutId = React.useId();\n const [uncontrolledValue, setUncontrolledValue] = React.useState(null);\n const isControlled = controlledValue !== undefined;\n const openItemValue = isControlled ? controlledValue : uncontrolledValue;\n\n const [activeTriggerId, setActiveTriggerId] = React.useState(null);\n const [isScrolling, setIsScrolling] = React.useState(false);\n const isScrollingRef = React.useRef(false);\n const timeoutRef = React.useRef(null);\n const scrollTimeoutRef = React.useRef(null);\n\n const closeMenu = React.useCallback(() => {\n if (!isControlled) {\n setUncontrolledValue(null);\n }\n setActiveTriggerId(null);\n if (isControlled && onValueChange) {\n onValueChange(null, { reason: \"none\" } as any);\n }\n }, [isControlled, onValueChange]);\n\n const handleValueChange = React.useCallback(\n (value: any, eventDetails: any) => {\n if (isScrollingRef.current && value) {\n return;\n }\n if (!isControlled) {\n setUncontrolledValue(value);\n }\n onValueChange?.(value, eventDetails);\n if (!value) {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n setActiveTriggerId(null);\n }, 150);\n }\n },\n [isControlled, onValueChange],\n );\n\n const setActiveTrigger = React.useCallback((id: string) => {\n if (isScrollingRef.current) return;\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n setActiveTriggerId(id);\n }, []);\n\n const clearActiveTriggerWithDelay = React.useCallback(() => {\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\n timeoutRef.current = setTimeout(() => {\n if (!openItemValue) {\n setActiveTriggerId(null);\n }\n }, 150);\n }, [openItemValue]);\n\n React.useEffect(() => {\n if (!closeOnScroll) return;\n\n const handleScroll = (event: Event) => {\n const target = event.target as Node | null;\n if (target && target instanceof Element) {\n if (target.closest('[data-slot=\"navigation-menu-popup\"]')) {\n return;\n }\n }\n\n closeMenu();\n\n isScrollingRef.current = true;\n setIsScrolling(true);\n\n if (scrollTimeoutRef.current) {\n clearTimeout(scrollTimeoutRef.current);\n }\n scrollTimeoutRef.current = setTimeout(() => {\n isScrollingRef.current = false;\n setIsScrolling(false);\n }, 150);\n };\n\n window.addEventListener(\"scroll\", handleScroll, { passive: true, capture: true });\n\n return () => {\n window.removeEventListener(\"scroll\", handleScroll, { capture: true });\n if (scrollTimeoutRef.current) {\n clearTimeout(scrollTimeoutRef.current);\n }\n };\n }, [closeOnScroll, closeMenu]);\n\n const hasActiveTrigger = Boolean(activeTriggerId || openItemValue);\n\n const highlightValue = React.useMemo(\n () => ({\n highlightLayoutId: generatedLayoutId,\n activeTriggerId,\n openItemValue,\n hasActiveTrigger,\n isScrolling,\n setActiveTrigger,\n clearActiveTriggerWithDelay,\n closeMenu,\n }),\n [\n generatedLayoutId,\n activeTriggerId,\n openItemValue,\n hasActiveTrigger,\n isScrolling,\n setActiveTrigger,\n clearActiveTriggerWithDelay,\n closeMenu,\n ],\n );\n\n return (\n \n \n {children}\n \n \n \n );\n}\n\nexport interface NavigationMenuListProps extends NavigationMenuPrimitive.List.Props {}\n\nfunction NavigationMenuList({ className, children, ...props }: NavigationMenuListProps) {\n return (\n \n {children}\n \n );\n}\n\nexport interface NavigationMenuItemProps extends NavigationMenuPrimitive.Item.Props {}\n\nfunction NavigationMenuItem({ className, ...props }: NavigationMenuItemProps) {\n return (\n \n );\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-3.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-8.5 w-max items-center justify-center disabled:pointer-events-none outline-none\",\n);\n\nexport interface NavigationMenuTriggerProps extends NavigationMenuPrimitive.Trigger.Props {\n hideArrow?: boolean;\n isActive?: boolean;\n}\n\nfunction NavigationMenuTrigger({\n className,\n children,\n hideArrow = false,\n isActive = false,\n ...props\n}: NavigationMenuTriggerProps) {\n const highlightContext = React.useContext(NavigationMenuHighlightContext);\n const triggerId = React.useId();\n\n return (\n {\n const isHovered = highlightContext?.activeTriggerId === triggerId;\n const isOpen = state.open;\n const isItemActive = isHovered || isOpen;\n const isCurrentActive = isItemActive || (!highlightContext?.hasActiveTrigger && isActive);\n\n const {\n onPointerDown: _onPointerDown,\n onMouseDown: _onMouseDown,\n onClick: _onClick,\n ...cleanTriggerProps\n } = triggerProps;\n\n return (\n {\n if (highlightContext?.isScrolling) return;\n triggerProps.onPointerEnter?.(e);\n highlightContext?.setActiveTrigger(triggerId);\n }}\n onFocus={(e: any) => {\n if (highlightContext?.isScrolling) return;\n triggerProps.onFocus?.(e);\n highlightContext?.setActiveTrigger(triggerId);\n }}\n onClick={(e: any) => {\n props.onClick?.(e);\n }}\n className={cn(\n \"group/navigation-menu-trigger relative inline-flex h-8.5 w-max cursor-default items-center justify-center rounded-md px-3.5 py-1.5 text-sm font-medium outline-none select-none disabled:pointer-events-none disabled:opacity-50\",\n highlightContext?.isScrolling && \"pointer-events-none\",\n className,\n )}>\n {isCurrentActive && highlightContext?.highlightLayoutId && (\n \n )}\n \n {children}\n {!hideArrow && (\n \n )}\n \n \n );\n }}\n />\n );\n}\n\nexport interface NavigationMenuContentProps extends NavigationMenuPrimitive.Content.Props {}\n\nfunction NavigationMenuContent({ className, ...props }: NavigationMenuContentProps) {\n return (\n \n );\n}\n\nexport interface NavigationMenuPositionerProps extends NavigationMenuPrimitive.Positioner.Props {\n popupClassName?: string;\n}\n\nfunction NavigationMenuPositioner({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n popupClassName,\n ...props\n}: NavigationMenuPositionerProps) {\n return (\n \n \n \n \n \n \n \n );\n}\n\nexport interface NavigationMenuLinkProps extends NavigationMenuPrimitive.Link.Props {}\n\nfunction NavigationMenuLink({ className, ...props }: NavigationMenuLinkProps) {\n return (\n (\n \n )}\n />\n );\n}\n\nexport interface NavigationMenuIndicatorProps extends NavigationMenuPrimitive.Icon.Props {}\n\nfunction NavigationMenuIndicator({ className, ...props }: NavigationMenuIndicatorProps) {\n return (\n (\n \n {state.open && (\n \n
\n \n )}\n \n )}\n />\n );\n}\n\nexport interface NavigationMenuArrowProps extends NavigationMenuPrimitive.Arrow.Props {}\n\nfunction NavigationMenuArrow({ className, ...props }: NavigationMenuArrowProps) {\n return (\n \n );\n}\n\nfunction NavigationMenuViewport({ className, ...props }: NavigationMenuPrimitive.Viewport.Props) {\n return (\n \n );\n}\n\nexport {\n NavigationMenu,\n NavigationMenuContent,\n NavigationMenuIndicator,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n NavigationMenuPositioner,\n NavigationMenuArrow,\n NavigationMenuViewport,\n};\n" } ], "mcp": { "description": "A collection of links for navigating websites. Provides gliding hover/focus trigger indicators, spring popup scale reveals, and animated indicator arrows.", "tags": [ "component", "navigation-menu", "navigation", "menu", "paceui", "animation" ] } }