50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T5096,"use client"; import * as React from "react"; import { cva } from "class-variance-authority"; import { AnimatePresence, motion } from "framer-motion"; import { ChevronDownIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { Highlight, HighlightItem } from "@/components/unlumen-ui/primitives/highlight"; type Spring = { type: "spring"; stiffness?: number; damping?: number; bounce: number; }; type ContentRecord = { children: React.ReactNode; className?: string; highlightClassName?: string; innerClassName?: string; }; type MotionNavigationMenuContextValue = { activeValue: string; direction: number; spring: Spring; viewport: boolean; viewportX: number | null; openValue: (value: string) => void; closeMenu: () => void; registerContent: (value: string, content: ContentRecord) => () => void; updateViewportPosition: () => void; }; type MotionNavigationMenuItemContextValue = { value?: string; }; const MotionNavigationMenuContext = React.createContext(null); const MotionNavigationMenuItemContext = React.createContext(null); const contentVariants = { initial: (direction: number) => ({ x: `${100 * direction}%`, opacity: 0 }), active: { x: "0%", opacity: 1 }, exit: (direction: number) => ({ x: `${-100 * direction}%`, opacity: 0 }), }; type MotionNavigationMenuProps = Omit< React.ComponentPropsWithRef<"nav">, "onValueChange" > & { viewport?: boolean; viewportClassName?: string; springBounce?: number; springStiffness?: number; springDamping?: number; value?: string; onValueChange?: (value: string) => void; }; function MotionNavigationMenu({ className, children, viewport = true, viewportClassName, springBounce = 0, springStiffness = 350, springDamping = 32, value, onValueChange, onPointerLeave, onKeyDown, ref, ...props }: MotionNavigationMenuProps) { const rootRef = React.useRef(null); const frameRef = React.useRef(null); const lastActiveValueRef = React.useRef(value ?? ""); const isControlled = value !== undefined; const [internalValue, setInternalValue] = React.useState(""); const [direction, setDirection] = React.useState(1); const [viewportX, setViewportX] = React.useState(null); const [contentByValue, setContentByValue] = React.useState< Record >({}); const activeValue = value ?? internalValue; const spring = React.useMemo( () => ({ type: "spring" as const, bounce: springBounce, stiffness: springStiffness, damping: springDamping, }), [springBounce, springStiffness, springDamping], ); const getItemValues = React.useCallback(() => { const root = rootRef.current; if (!root) { return []; } return Array.from( root.querySelectorAll( '[data-slot="navigation-menu-item"][data-value]', ), (item) => item.dataset.value ?? "", ).filter(Boolean); }, []); const updateViewportPosition = React.useCallback(() => { if (frameRef.current !== null) { cancelAnimationFrame(frameRef.current); } frameRef.current = requestAnimationFrame(() => { const root = rootRef.current; if (!root) { return; } const rootRect = root.getBoundingClientRect(); const activeTrigger = root.querySelector( '[data-slot="navigation-menu-trigger"][data-state="open"]', ); if (!activeTrigger) { setViewportX(rootRect.width / 2); return; } const triggerRect = activeTrigger.getBoundingClientRect(); const idealX = triggerRect.left - rootRect.left + triggerRect.width / 2; const measureEl = root.querySelector( '[data-slot="navigation-menu-measure"]', ); const viewportEl = root.querySelector( '[data-slot="navigation-menu-viewport"]', ); const contentWidth = (measureEl ? measureEl.offsetWidth : 0) || (viewportEl ? viewportEl.offsetWidth : 0); const half = contentWidth / 2; if (contentWidth > 0) { // Find the nearest clipping ancestor to use as the boundary let boundary: DOMRect | null = null; let ancestor = root.parentElement; while (ancestor && ancestor !== document.body) { const style = window.getComputedStyle(ancestor); const overflow = style.overflow + style.overflowX; if (/hidden|clip|scroll|auto/.test(overflow)) { boundary = ancestor.getBoundingClientRect(); break; } ancestor = ancestor.parentElement; } if (!boundary) { boundary = document.documentElement.getBoundingClientRect(); } const margin = 8; const dropLeft = rootRect.left + idealX - half; const dropRight = rootRect.left + idealX + half; let adjustment = 0; if (dropLeft < boundary.left + margin) { adjustment = boundary.left + margin - dropLeft; } else if (dropRight > boundary.right - margin) { adjustment = boundary.right - margin - dropRight; } setViewportX(idealX + adjustment); } else { setViewportX(idealX); } }); }, []); const setRootRef = React.useCallback( (node: HTMLElement | null) => { rootRef.current = node; if (typeof ref === "function") { ref(node); } else if (ref) { ref.current = node; } }, [ref], ); const setActiveValue = React.useCallback( (nextValue: string) => { if (!isControlled) { setInternalValue(nextValue); } onValueChange?.(nextValue); }, [isControlled, onValueChange], ); const openValue = React.useCallback( (nextValue: string) => { if (!nextValue || nextValue === lastActiveValueRef.current) { return; } const itemValues = getItemValues(); const previousIndex = itemValues.indexOf(lastActiveValueRef.current); const nextIndex = itemValues.indexOf(nextValue); if (previousIndex !== -1 && nextIndex !== -1) { setDirection(nextIndex > previousIndex ? 1 : -1); } lastActiveValueRef.current = nextValue; setActiveValue(nextValue); updateViewportPosition(); }, [getItemValues, setActiveValue, updateViewportPosition], ); const closeMenu = React.useCallback(() => { lastActiveValueRef.current = ""; setActiveValue(""); updateViewportPosition(); }, [setActiveValue, updateViewportPosition]); const registerContent = React.useCallback( (value: string, content: ContentRecord) => { setContentByValue((current) => { const previous = current[value]; if ( previous?.children === content.children && previous?.className === content.className && previous?.innerClassName === content.innerClassName ) { return current; } return { ...current, [value]: content }; }); return () => { setContentByValue((current) => { if (!current[value]) { return current; } const next = { ...current }; delete next[value]; return next; }); }; }, [], ); React.useEffect(() => { if (value === undefined) { return; } if (!value) { lastActiveValueRef.current = ""; return; } openValue(value); }, [openValue, value]); React.useLayoutEffect(() => { updateViewportPosition(); }, [activeValue, updateViewportPosition]); React.useLayoutEffect(() => { const root = rootRef.current; if (!root || typeof ResizeObserver === "undefined") { return () => { if (frameRef.current !== null) { cancelAnimationFrame(frameRef.current); } }; } const observer = new ResizeObserver(updateViewportPosition); observer.observe(root); return () => { observer.disconnect(); if (frameRef.current !== null) { cancelAnimationFrame(frameRef.current); } }; }, [updateViewportPosition]); React.useEffect(() => { function handlePointerDown(event: PointerEvent) { if ( rootRef.current && event.target instanceof Node && !rootRef.current.contains(event.target) ) { closeMenu(); } } document.addEventListener("pointerdown", handlePointerDown); return () => document.removeEventListener("pointerdown", handlePointerDown); }, [closeMenu]); const contextValue = React.useMemo( () => ({ activeValue, direction, spring, viewport, viewportX, openValue, closeMenu, registerContent, updateViewportPosition, }), [ activeValue, closeMenu, direction, openValue, registerContent, spring, updateViewportPosition, viewport, viewportX, ], ); return ( ); } function MotionNavigationMenuList({ className, highlightClassName, ...props }: React.ComponentPropsWithRef<"ul"> & { highlightClassName?: string; }) { return (

); } const motionNavigationMenuTriggerStyle = cva( "group inline-flex h-9 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium hover:text-accent-foreground focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground focus-visible:ring-ring/50 outline-none transition-colors focus-visible:ring-[3px] focus-visible:outline-1", ); function MotionNavigationMenuTrigger({ className, children, onPointerEnter, onFocus, onClick, ...props }: React.ComponentPropsWithRef<"button">) { const context = React.useContext(MotionNavigationMenuContext); const itemContext = React.useContext(MotionNavigationMenuItemContext); const value = itemContext?.value; const isOpen = !!value && context?.activeValue === value; return ( ); } function MotionNavigationMenuContent({ className, highlightClassName, innerClassName, children, }: React.ComponentPropsWithRef<"div"> & { highlightClassName?: string; innerClassName?: string; }) { const context = React.useContext(MotionNavigationMenuContext); const itemContext = React.useContext(MotionNavigationMenuItemContext); const value = itemContext?.value; const isOpen = !!value && context?.activeValue === value; React.useLayoutEffect(() => { if (!context || !value || !context.viewport) { return; } return context.registerContent(value, { children, className, highlightClassName, innerClassName, }); }, [children, className, context, highlightClassName, innerClassName, value]); if (!context || !value || context.viewport) { return null; } return ( {isOpen && ( {children} )} ); } function MotionNavigationMenuContentInner({ highlightClassName, innerClassName, children, }: { highlightClassName?: string; innerClassName?: string; children: React.ReactNode; }) { return (

{children}

); } function MotionNavigationMenuViewport({ className, contentByValue, }: React.ComponentPropsWithRef<"div"> & { contentByValue?: Record; }) { const context = React.useContext(MotionNavigationMenuContext); const measureRef = React.useRef(null); const [size, setSize] = React.useState({ width: 0, height: 0 }); const [lastSize, setLastSize] = React.useState({ width: 0, height: 0 }); const activeContent = context?.activeValue && contentByValue ? contentByValue[context.activeValue] : undefined; React.useLayoutEffect(() => { const node = measureRef.current; if (!node || !activeContent) { return; } const updateSize = () => { const rect = node.getBoundingClientRect(); const nextSize = { width: rect.width, height: rect.height, }; setSize(nextSize); if (nextSize.width > 0 || nextSize.height > 0) { setLastSize(nextSize); } context?.updateViewportPosition(); }; updateSize(); if (typeof ResizeObserver === "undefined") { return; } const observer = new ResizeObserver(updateSize); observer.observe(node); return () => observer.disconnect(); }, [activeContent, context]); const width = size.width > 0 ? size.width : lastSize.width; const height = size.height > 0 ? size.height : lastSize.height; return ( {activeContent && context?.activeValue && ( {activeContent.children} )} ); } function MotionNavigationMenuLink({ className, ...props }: React.ComponentPropsWithRef<"a">) { return ( ); } function MotionNavigationMenuIndicator({ className, ...props }: React.ComponentPropsWithRef<"div">) { return (

); } export { MotionNavigationMenu, MotionNavigationMenuList, MotionNavigationMenuItem, MotionNavigationMenuContent, MotionNavigationMenuTrigger, MotionNavigationMenuLink, MotionNavigationMenuViewport, MotionNavigationMenuIndicator, motionNavigationMenuTriggerStyle, }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","framer-motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"framer-motion"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["@unlumen-ui/highlight"]}]]}],["$","$L51",null,{"sourceUrl":"https://ui.unlumen.com/r/motion-navigation-menu.json","proxyUrl":"https://shadcnregistry.com/r/unlumen-ui/motion-navigation-menu","itemId":"@unlumen-ui/motion-navigation-menu"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/components/unlumen/motion-navigation-menu/index.tsx","content":"$53","type":"registry:component","target":"components/unlumen-ui/motion-navigation-menu.tsx"}]}]]}],"$L54"]}]

Motion Navigation Menu

Installation

Files

components

Styles