{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "navigation-menu", "type": "registry:ui", "title": "Navigation Menu", "description": "Top-level site navigation with animated mega-menu dropdowns and active-link states.", "dependencies": [ "@radix-ui/react-navigation-menu", "@saasflare/ui", "class-variance-authority" ], "files": [ { "path": "components/ui/navigation-menu.tsx", "type": "registry:ui", "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview NavigationMenu primitive — site navigation with animated dropdowns, viewport support, and active indicators.\n * Built on Radix UI NavigationMenu. Part of the Saasflare base component layer.\n * @module packages/ui/components/ui/navigation-menu\n * @layer core\n *\n * @component\n * @example\n * import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@saasflare/ui';\n * \n * \n * \n * Products\n * \n * Documentation\n * \n * \n * \n * \n */\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { CaretDownIcon } from \"@saasflare/ui\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/**\n * Props for {@link NavigationMenu}.\n *\n * `viewport` toggles the shared {@link NavigationMenuViewport} that hosts all\n * dropdown content in one animated panel; set it to `false` to render each\n * item's content as a self-contained popover below its trigger instead.\n */\ninterface NavigationMenuProps\n extends Omit, keyof SaasflareComponentProps>,\n SaasflareComponentProps {\n /**\n * Render the shared viewport panel for dropdown content.\n *\n * @default true\n */\n viewport?: boolean\n}\n\n/**\n * Site navigation root with animated dropdown menus, built on Radix NavigationMenu.\n *\n * Hosts a {@link NavigationMenuList} of items and, by default, a shared\n * {@link NavigationMenuViewport} that all dropdown content animates into.\n * Resolves the design-system axes and emits them as data attributes. Use for\n * horizontal header navigation.\n *\n * @component\n * @layer core\n */\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n surface,\n radius,\n animated,\n iconWeight,\n ...props\n}: NavigationMenuProps) {\n const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\n/**\n * Horizontal list that lays out the top-level {@link NavigationMenuItem} entries.\n *\n * @component\n * @layer core\n */\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * A single menu entry — wraps a trigger/content pair or a standalone link.\n *\n * @component\n * @layer core\n */\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n/**\n * cva builder for the trigger button styles. Applied internally by\n * {@link NavigationMenuTrigger}; call it on a plain {@link NavigationMenuLink}\n * to make a top-level link match the trigger appearance.\n */\nconst navigationMenuTriggerStyle = cva(\n \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\"\n)\n\ninterface NavigationMenuTriggerProps\n extends React.ComponentProps,\n Pick {}\n\n/**\n * Button that opens an item's {@link NavigationMenuContent}. Renders a caret\n * that rotates while open and follows the resolved `iconWeight` axis.\n *\n * @component\n * @layer core\n */\nfunction NavigationMenuTrigger({\n className,\n children,\n iconWeight,\n ...props\n}: NavigationMenuTriggerProps) {\n const sf = useSaasflareProps({ iconWeight })\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\ninterface NavigationMenuContentProps\n extends Omit, keyof SaasflareComponentProps>,\n SaasflareComponentProps {}\n\n/**\n * Dropdown panel for a menu item. Renders into the shared\n * {@link NavigationMenuViewport} when the root has `viewport` enabled,\n * otherwise as a self-contained popover below its trigger.\n *\n * @component\n * @layer core\n */\nfunction NavigationMenuContent({\n className,\n surface,\n radius,\n animated,\n iconWeight,\n ...props\n}: NavigationMenuContentProps) {\n const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n return (\n \n )\n}\n\ninterface NavigationMenuViewportProps\n extends Omit, keyof SaasflareComponentProps>,\n SaasflareComponentProps {}\n\n/**\n * Shared panel that hosts the active item's content and animates between sizes.\n * Rendered automatically by {@link NavigationMenu} unless `viewport` is `false`.\n *\n * @component\n * @layer core\n */\nfunction NavigationMenuViewport({\n className,\n surface,\n radius,\n animated,\n iconWeight,\n ...props\n}: NavigationMenuViewportProps) {\n const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n return (\n
\n \n
\n )\n}\n\ninterface NavigationMenuLinkProps\n extends Omit, keyof SaasflareComponentProps>,\n SaasflareComponentProps {}\n\n/**\n * Navigational link inside the menu — use `asChild` to compose with a framework\n * router link. Works standalone in an item or inside dropdown content.\n *\n * @component\n * @layer core\n */\nfunction NavigationMenuLink({\n className,\n surface,\n radius,\n animated,\n iconWeight,\n ...props\n}: NavigationMenuLinkProps) {\n const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n return (\n \n )\n}\n\ninterface NavigationMenuIndicatorProps\n extends Omit, keyof SaasflareComponentProps>,\n SaasflareComponentProps {}\n\n/**\n * Animated arrow that tracks the active trigger and points at the open content.\n *\n * @component\n * @layer core\n */\nfunction NavigationMenuIndicator({\n className,\n surface,\n radius,\n animated,\n iconWeight,\n ...props\n}: NavigationMenuIndicatorProps) {\n const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n type NavigationMenuProps,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", "target": "components/ui/navigation-menu.tsx" } ], "$meta": { "source": "https://ui.saasflare.io/r/navigation-menu.json" } }