{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "top-navigation-5",
  "title": "Top Navigation 5 – Minimal center-aligned links with inline auth",
  "description": "A stripped-back, center-aligned top navigation that prioritizes clarity and whitespace. Primary links sit in a single horizontal row with the brand anchored to the left and a lightweight login action on the right. On small screens, the layout collapses into a simple slide-out menu with stacked links and a single secondary action, keeping the structure familiar while reducing visual noise.",
  "registryDependencies": [
    "button",
    "@shadcncraft/placeholder-logo",
    "@shadcncraft/use-click-outside",
    "@shadcncraft/use-mobile"
  ],
  "files": [
    {
      "path": "blocks/pro-marketing/top-navigation/top-navigation-5/index.tsx",
      "content": "\"use client\";\n\nimport { useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { IconPlaceholder } from \"@/registry/icons/icon-placeholder\";\nimport { useClickOutside } from \"@/hooks/use-click-outside\";\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\";\nimport {\n  MobileNavigationMenu,\n  MobileNavigationMenuItem,\n  MobileNavigationMenuLink,\n  MobileNavigationMenuList,\n  mobileNavigationMenuTriggerStyle,\n} from \"@/components/shadcncraft/pro-marketing/mobile-navigation-menu\";\nimport { PlaceholderLogo } from \"@/components/shadcncraft/pro-marketing/placeholder-logo\";\n\n// Defaults to Tailwind's md: breakpoint.\n// Change to 1024 + use lg: classes for 1024px breakpoint or whatever breakpoint you want to use\nconst MOBILE_BREAKPOINT = 768;\n\nexport function TopNavigation5() {\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const toggleMenu = () => setIsMenuOpen((prev) => !prev);\n\n  const navigationContainerRef = useRef<HTMLDivElement>(null);\n  const isMobile = useIsMobile(MOBILE_BREAKPOINT);\n\n  useClickOutside(navigationContainerRef, () => {\n    if (isMobile && isMenuOpen) {\n      setIsMenuOpen(false);\n    }\n  });\n\n  return (\n    // To make this a sticky navigation, you can add `sticky top-0 z-50` classes to the parent div\n    <div\n      className=\"w-full bg-background py-3.5 transition-all ease-in-out\"\n      role=\"navigation\"\n      aria-label=\"Website top navigation\"\n      ref={navigationContainerRef}\n    >\n      <div className=\"relative mx-auto flex max-w-7xl flex-col justify-between px-6 md:flex-row lg:gap-10 lg:px-10\">\n        {/* Logo and Toggle Mobile Nav Button */}\n        <div className=\"flex items-center justify-between\">\n          {/* Replace with actual logo */}\n          <a href=\"/\" aria-label=\"Go to home page\">\n            <PlaceholderLogo />\n          </a>\n\n          {/* Toggle Mobile Nav Button - Visible on screen sizes < 768px */}\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"md:hidden\"\n            onClick={toggleMenu}\n            aria-label={isMenuOpen ? \"Close navigation menu\" : \"Open navigation menu\"}\n          >\n            {isMenuOpen ? (\n              <IconPlaceholder\n                lucide=\"X\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n                className=\"animate-in zoom-in-50\"\n              />\n            ) : (\n              <IconPlaceholder\n                lucide=\"Menu\"\n                tabler=\"IconMenu2\"\n                hugeicons=\"Menu01Icon\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiMenuLine\"\n                className=\"animate-in zoom-in-50\"\n              />\n            )}\n          </Button>\n        </div>\n\n        {/* Desktop Navigation - Visible on screen sizes ≥ 768px */}\n        <div className=\"hidden md:contents\">\n          <DesktopNavigation />\n          <ActionButtons />\n        </div>\n\n        {/* Mobile Navigation - Visible on screen sizes < 768px */}\n        <div\n          className={cn(\n            \"grid transition-all duration-300 ease-in-out md:hidden\",\n            isMenuOpen\n              ? \"grid-rows-[1fr] pt-6 opacity-100\"\n              : \"pointer-events-none grid-rows-[0fr] opacity-0\"\n          )}\n        >\n          <div\n            className={cn(isMenuOpen ? \"overflow-visible\" : \"overflow-hidden\")}\n            inert={!isMenuOpen || undefined}\n            aria-hidden={!isMenuOpen}\n          >\n            <div className=\"flex flex-col gap-9\">\n              <MobileNavigation />\n              <ActionButtons />\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction ActionButtons() {\n  return (\n    <div className=\"flex flex-col gap-2 md:flex-row\">\n      <Button variant=\"outline\" className=\"w-full md:w-fit\">\n        Login\n      </Button>\n    </div>\n  );\n}\n\nfunction DesktopNavigation() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        {NAV_ITEMS.map((item) => {\n          // Replace with actual active link detection\n          const isActive = item.href === \"/pathname\";\n          return (\n            <NavigationMenuItem key={item.label}>\n              <NavigationMenuLink\n                className={cn(navigationMenuTriggerStyle(), \"bg-transparent\")}\n                active={isActive}\n                asChild\n              >\n                <a href={item.href}>{item.label}</a>\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          );\n        })}\n      </NavigationMenuList>\n    </NavigationMenu>\n  );\n}\n\nfunction MobileNavigation() {\n  return (\n    <MobileNavigationMenu mode=\"single\">\n      <MobileNavigationMenuList>\n        {NAV_ITEMS.map((item) => {\n          // Replace with actual active link detection\n          const isActive = item.href === \"/pathname\";\n          return (\n            <MobileNavigationMenuItem key={item.label} value={item.label}>\n              <MobileNavigationMenuLink\n                className={cn(mobileNavigationMenuTriggerStyle())}\n                active={isActive}\n                asChild\n              >\n                {/* Replace with your actual link component or whatever alternative your framework provides */}\n                <a href={item.href}>{item.label}</a>\n              </MobileNavigationMenuLink>\n            </MobileNavigationMenuItem>\n          );\n        })}\n      </MobileNavigationMenuList>\n    </MobileNavigationMenu>\n  );\n}\n\nconst NAV_ITEMS = [\n  { label: \"Products\", href: \"#\" },\n  { label: \"Solutions\", href: \"#\" },\n  { label: \"Pricing\", href: \"#\" },\n  { label: \"Company\", href: \"#\" },\n];\n",
      "type": "registry:component",
      "target": "@components/shadcncraft/pro-marketing/top-navigation/top-navigation-5/index.tsx"
    }
  ],
  "meta": {
    "tier": "free",
    "figmaNodeId": "14088-52274",
    "bundle": "pro-marketing"
  },
  "categories": ["top-navigation"],
  "type": "registry:block"
}