{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "mega-menu", "type": "registry:ui", "title": "Mega Menu", "description": "Site menu with one panel that morphs between triggers and slides content.", "categories": [ "app-nav" ], "dependencies": [ "@base-ui/react", "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/icons.json", "https://www.stealth.pm/r/motion.json", "https://www.stealth.pm/r/use-controllable-state.json" ], "files": [ { "path": "components/ui/mega-menu.tsx", "content": "\"use client\";\nimport { NavigationMenu } from \"@base-ui/react/navigation-menu\";\nimport { animate, motion, useMotionValue, useReducedMotion } from \"motion/react\";\nimport { createContext, useCallback, useContext, useLayoutEffect, useRef, useState } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ArrowRight, ChevronDown } from \"@/lib/icons\";\nimport { spring } from \"@/lib/motion\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\n\n/* -------------------------------------------------------------------------------------------------\n * Root: the trigger row, the one pill under it, and the one panel that morphs between menus\n * -----------------------------------------------------------------------------------------------*/\n\ntype PillContextValue = { enter: (el: HTMLElement) => void };\nconst PillContext = createContext(null);\n\nexport type MegaMenuProps = Omit & {\n className?: string;\n /** The open item's value, or null when closed. */\n value?: string | null;\n defaultValue?: string | null;\n onValueChange?: (value: string | null) => void;\n /** Distance from the trigger row to the panel, in px. */\n sideOffset?: number;\n /** Render the panel inside this element instead of the body. */\n container?: React.RefObject;\n /**\n * What the panel hangs from. \"row\" keeps it under the start of the trigger row, so wide\n * panels never run off the edge and only the size changes between menus. \"trigger\"\n * slides it along the row to sit under each trigger.\n */\n anchorTo?: \"row\" | \"trigger\";\n /** How the panel lines up with its anchor. */\n align?: \"start\" | \"center\" | \"end\";\n};\n\nexport function MegaMenu({\n value,\n defaultValue = null,\n onValueChange,\n sideOffset = 8,\n container,\n anchorTo = \"row\",\n align = \"start\",\n delay = 80,\n closeDelay = 160,\n className,\n children,\n ...rest\n}: MegaMenuProps) {\n const [open, setOpen] = useControllableState({ value, defaultValue, onChange: onValueChange });\n const reduce = !!useReducedMotion();\n const listRef = useRef(null);\n const x = useMotionValue(0);\n const width = useMotionValue(0);\n const [on, setOn] = useState(false);\n const shown = useRef(false);\n const hovering = useRef(false);\n const openedAt = useRef(0);\n\n // One pill for the whole row. It follows the pointer across triggers and links,\n // and when the pointer leaves the row it rests on the trigger whose panel is open,\n // so you always know which menu you are reading.\n const moveTo = useCallback(\n (el: HTMLElement | null) => {\n const list = listRef.current;\n if (!el || !list) {\n shown.current = false;\n setOn(false);\n return;\n }\n const left = el.getBoundingClientRect().left - list.getBoundingClientRect().left;\n if (shown.current && !reduce) {\n animate(x, left, spring.follow);\n animate(width, el.offsetWidth, spring.follow);\n } else {\n x.jump(left);\n width.jump(el.offsetWidth);\n }\n shown.current = true;\n setOn(true);\n },\n [reduce, x, width],\n );\n const home = useCallback(() => moveTo(listRef.current?.querySelector(\"[data-popup-open]\") ?? null), [moveTo]);\n\n useLayoutEffect(() => {\n if (!hovering.current) home();\n }, [open, home]);\n\n return (\n {\n // A press that lands just after hover already opened this panel is the person\n // confirming what they see, not asking to close it. Without this, a quick click on\n // a trigger races the hover delay and shuts the menu under the pointer.\n if (next == null && details.reason === \"trigger-press\" && performance.now() - openedAt.current < 450) {\n details.cancel();\n return;\n }\n if (next != null && next !== open) openedAt.current = performance.now();\n setOpen((next as string | null) ?? null);\n }}\n delay={delay}\n closeDelay={closeDelay}\n className={cn(\"relative min-w-0 text-fg\", className)}\n {...rest}\n >\n ((hovering.current = true), moveTo(el)) }}>\n {\n hovering.current = false;\n home();\n }}\n >\n \n {children}\n \n \n\n \n \n \n \n \n \n \n \n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Row parts\n * -----------------------------------------------------------------------------------------------*/\n\nconst rowItem = cn(\n \"relative flex h-8 select-none items-center gap-1 whitespace-nowrap rounded-full px-2 text-[13px] text-fg-2 no-underline outline-none sm:px-3\",\n \"transition-[color,scale] duration-150 hover:text-fg active:scale-[0.97] active:duration-75 data-popup-open:text-fg aria-[current=page]:text-fg\",\n \"focus-visible:outline-solid focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-fg-3\",\n \"before:absolute before:inset-x-0 before:-inset-y-1.5 before:content-[''] pointer-fine:before:hidden\",\n);\n\nfunction usePillEnter() {\n const pill = useContext(PillContext);\n return (e: React.PointerEvent) => {\n if (e.pointerType !== \"touch\") pill?.enter(e.currentTarget);\n };\n}\n\nexport type MegaMenuItemProps = NavigationMenu.Item.Props;\n\n/** One entry in the row: a trigger with its content, or a plain link. */\nexport function MegaMenuItem(props: MegaMenuItemProps) {\n return ;\n}\n\nexport type MegaMenuTriggerProps = Omit & { className?: string };\n\nexport function MegaMenuTrigger({ className, children, onPointerEnter, ...rest }: MegaMenuTriggerProps) {\n const enter = usePillEnter();\n return (\n {\n onPointerEnter?.(e);\n enter(e);\n }}\n {...rest}\n >\n {children}\n \n \n \n \n );\n}\n\nexport type MegaMenuTopLinkProps = Omit & { className?: string };\n\n/** A link in the row that opens nothing, such as Pricing. */\nexport function MegaMenuTopLink({ className, onPointerEnter, ...rest }: MegaMenuTopLinkProps) {\n const enter = usePillEnter();\n return (\n {\n onPointerEnter?.(e);\n enter(e);\n }}\n {...rest}\n />\n );\n}\n\nexport type MegaMenuContentProps = Omit & { className?: string };\n\n/**\n * What a trigger opens. Moving to a neighbor slides the old content out and the new\n * in from the side you moved toward, while the panel resizes around them.\n */\nexport function MegaMenuContent({ className, ...rest }: MegaMenuContentProps) {\n return (\n \n );\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Panel parts\n * -----------------------------------------------------------------------------------------------*/\n\nexport type MegaMenuLinkProps = Omit & {\n className?: string;\n title: React.ReactNode;\n description?: React.ReactNode;\n /** A 16px icon, drawn in a small tile. */\n icon?: React.ReactNode;\n};\n\n/** A destination inside a panel: an icon tile, a title and one line of description. */\nexport function MegaMenuLink({ title, description, icon, className, closeOnClick = true, ...rest }: MegaMenuLinkProps) {\n return (\n \n {icon && (\n \n {icon}\n \n )}\n \n {title}\n {description && {description}}\n \n \n );\n}\n\nexport type MegaMenuSectionProps = Omit, \"title\"> & { title?: string };\n\n/** A labeled column of links. */\nexport function MegaMenuSection({ title, className, children, ...rest }: MegaMenuSectionProps) {\n return (\n
\n {title &&

{title}

}\n
    \n {Array.isArray(children) ? children.map((c, i) =>
  • {c}
    • ) :
  • {children}
    • }\n
\n
\n );\n}\n\nexport type MegaMenuFooterLinkProps = Omit & { className?: string; label?: React.ReactNode };\n\n/** A strip along the bottom of a panel: \"What's new\", \"All integrations\". The arrow nudges on hover. */\nexport function MegaMenuFooterLink({ label, className, children, closeOnClick = true, ...rest }: MegaMenuFooterLinkProps) {\n return (\n \n {label && {label}}\n {children}\n \n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/mega-menu" }