{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbars-03",
  "type": "registry:component",
  "title": "Navbars",
  "author": "Toby Belhome",
  "description": "Create clean, responsive navigation with Tailwind CSS navbar sections. These layouts provide intuitive menus, clear branding, and subtle interactions to guide users effortlessly through your site. Perfect for websites, SaaS platforms, and marketing pages seeking a modern, user-friendly, and visually appealing navigation experience.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input",
    "popover"
  ],
  "files": [
    {
      "path": "examples/blocks/marketing/navbars/03/page.tsx",
      "content": "import { useId } from \"react\";\nimport { SearchIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  NavigationMenu,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList\n} from \"@/components/ui/navigation-menu\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport Link from \"next/link\";\n\n// Navigation links array to be used in both desktop and mobile menus\nconst navigationLinks = [\n  { href: \"#\", label: \"Products\" },\n  { href: \"#\", label: \"Categories\" },\n  { href: \"#\", label: \"Deals\" }\n];\n\nconst Logo = () => {\n  return (\n    <Link href=\"#\" className=\"flex items-center space-x-2\">\n      <img src=\"/logo.svg\" className=\"size-8 dark:invert\" alt=\"bundui logo\" />\n      <span className=\"text-2xl font-bold\">Bundui</span>\n    </Link>\n  );\n};\n\nexport default function Navbar() {\n  const id = useId();\n\n  return (\n    <>\n      <header className=\"border-b px-4 md:px-6\">\n        <div className=\"flex h-16 items-center justify-between gap-4\">\n          {/* Left side */}\n          <div className=\"flex flex-1 items-center gap-2\">\n            {/* Mobile menu trigger */}\n            <Popover>\n              <PopoverTrigger asChild>\n                <Button className=\"group size-8 md:hidden\" variant=\"ghost\" size=\"icon\">\n                  <svg\n                    className=\"pointer-events-none\"\n                    width={16}\n                    height={16}\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    xmlns=\"http://www.w3.org/2000/svg\">\n                    <path\n                      d=\"M4 12L20 12\"\n                      className=\"origin-center -translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-x-0 group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[315deg]\"\n                    />\n                    <path\n                      d=\"M4 12H20\"\n                      className=\"origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-aria-expanded:rotate-45\"\n                    />\n                    <path\n                      d=\"M4 12H20\"\n                      className=\"origin-center translate-y-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-aria-expanded:translate-y-0 group-aria-expanded:rotate-[135deg]\"\n                    />\n                  </svg>\n                </Button>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\" className=\"w-36 p-1 md:hidden\">\n                <NavigationMenu className=\"max-w-none *:w-full\">\n                  <NavigationMenuList className=\"flex-col items-start gap-0 md:gap-2\">\n                    {navigationLinks.map((link, index) => (\n                      <NavigationMenuItem key={index} className=\"w-full\">\n                        <NavigationMenuLink href={link.href} className=\"py-1.5\">\n                          {link.label}\n                        </NavigationMenuLink>\n                      </NavigationMenuItem>\n                    ))}\n                    <NavigationMenuItem className=\"w-full\" role=\"presentation\" aria-hidden=\"true\">\n                      <div\n                        role=\"separator\"\n                        aria-orientation=\"horizontal\"\n                        className=\"bg-border -mx-1 my-1 h-px\"></div>\n                    </NavigationMenuItem>\n                    <NavigationMenuItem className=\"w-full\">\n                      <NavigationMenuLink href=\"#\" className=\"py-1.5\">\n                        Sign In\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                    <NavigationMenuItem className=\"w-full\">\n                      <Button asChild size=\"sm\" className=\"mt-0.5 w-full text-left text-sm\">\n                        <span className=\"flex items-baseline gap-2\">\n                          Cart\n                          <span className=\"text-primary-foreground/60 text-xs\">2</span>\n                        </span>\n                      </Button>\n                    </NavigationMenuItem>\n                  </NavigationMenuList>\n                </NavigationMenu>\n              </PopoverContent>\n            </Popover>\n            {/* Main nav */}\n            <div className=\"flex flex-1 items-center gap-6 max-md:justify-between\">\n              <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n                <Logo />\n              </a>\n              {/* Navigation menu */}\n              <NavigationMenu className=\"max-md:hidden\">\n                <NavigationMenuList className=\"gap-2\">\n                  {navigationLinks.map((link, index) => (\n                    <NavigationMenuItem key={index}>\n                      <NavigationMenuLink\n                        href={link.href}\n                        className=\"text-muted-foreground hover:text-primary py-1.5 font-medium\">\n                        {link.label}\n                      </NavigationMenuLink>\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n              {/* Search form */}\n              <div className=\"relative\">\n                <Input\n                  id={id}\n                  className=\"peer h-8 ps-8 pe-2\"\n                  placeholder=\"Search...\"\n                  type=\"search\"\n                />\n                <div className=\"text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-2 peer-disabled:opacity-50\">\n                  <SearchIcon size={16} />\n                </div>\n              </div>\n            </div>\n          </div>\n          {/* Right side */}\n          <div className=\"flex items-center gap-2 max-md:hidden\">\n            <Button asChild variant=\"ghost\" size=\"sm\" className=\"text-sm\">\n              <a href=\"#\">Sign In</a>\n            </Button>\n            <Button asChild size=\"sm\" className=\"text-sm\">\n              <a href=\"#\">\n                <span className=\"flex items-baseline gap-2\">\n                  Cart\n                  <span className=\"text-primary-foreground/60 text-xs\">2</span>\n                </span>\n              </a>\n            </Button>\n          </div>\n        </div>\n      </header>\n\n      <main className=\"bg-muted h-70\"></main>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/navbars-03.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}