{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbars-02",
  "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",
    "popover"
  ],
  "files": [
    {
      "path": "examples/blocks/marketing/navbars/02/page.tsx",
      "content": "import { BookOpenIcon, InfoIcon, LifeBuoyIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger\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: \"Home\" },\n  {\n    label: \"Features\",\n    submenu: true,\n    type: \"description\",\n    items: [\n      {\n        href: \"#\",\n        label: \"Components\",\n        description: \"Browse all components in the library.\"\n      },\n      {\n        href: \"#\",\n        label: \"Documentation\",\n        description: \"Learn how to use the library.\"\n      },\n      {\n        href: \"#\",\n        label: \"Templates\",\n        description: \"Pre-built layouts for common use cases.\"\n      }\n    ]\n  },\n  {\n    label: \"Pricing\",\n    submenu: true,\n    type: \"simple\",\n    items: [\n      { href: \"#\", label: \"Product A\" },\n      { href: \"#\", label: \"Product B\" },\n      { href: \"#\", label: \"Product C\" },\n      { href: \"#\", label: \"Product D\" }\n    ]\n  },\n  {\n    label: \"About\",\n    submenu: true,\n    type: \"icon\",\n    items: [\n      { href: \"#\", label: \"Getting Started\", icon: \"BookOpenIcon\" },\n      { href: \"#\", label: \"Tutorials\", icon: \"LifeBuoyIcon\" },\n      { href: \"#\", label: \"About Us\", icon: \"InfoIcon\" }\n    ]\n  }\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  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 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-64 p-1 md:hidden\">\n                <NavigationMenu viewport={false} 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                        {link.submenu ? (\n                          <>\n                            <div className=\"text-muted-foreground px-2 py-1.5 text-xs font-medium\">\n                              {link.label}\n                            </div>\n                            <ul>\n                              {link.items.map((item, itemIndex) => (\n                                <li key={itemIndex}>\n                                  <NavigationMenuLink href={item.href} className=\"py-1.5\">\n                                    {item.label}\n                                  </NavigationMenuLink>\n                                </li>\n                              ))}\n                            </ul>\n                          </>\n                        ) : (\n                          <NavigationMenuLink href={link.href} className=\"py-1.5\">\n                            {link.label}\n                          </NavigationMenuLink>\n                        )}\n                        {/* Add separator between different types of items */}\n                        {index < navigationLinks.length - 1 &&\n                          // Show separator if:\n                          // 1. One is submenu and one is simple link OR\n                          // 2. Both are submenus but with different types\n                          ((!link.submenu && navigationLinks[index + 1].submenu) ||\n                            (link.submenu && !navigationLinks[index + 1].submenu) ||\n                            (link.submenu &&\n                              navigationLinks[index + 1].submenu &&\n                              link.type !== navigationLinks[index + 1].type)) && (\n                            <div\n                              role=\"separator\"\n                              aria-orientation=\"horizontal\"\n                              className=\"bg-border -mx-1 my-1 h-px w-full\"\n                            />\n                          )}\n                      </NavigationMenuItem>\n                    ))}\n                  </NavigationMenuList>\n                </NavigationMenu>\n              </PopoverContent>\n            </Popover>\n            {/* Main nav */}\n            <div className=\"flex items-center gap-6\">\n              <a href=\"#\" className=\"text-primary hover:text-primary/90\">\n                <Logo />\n              </a>\n              {/* Navigation menu */}\n              <NavigationMenu viewport={false} className=\"max-md:hidden\">\n                <NavigationMenuList className=\"gap-2\">\n                  {navigationLinks.map((link, index) => (\n                    <NavigationMenuItem key={index}>\n                      {link.submenu ? (\n                        <>\n                          <NavigationMenuTrigger className=\"text-muted-foreground hover:text-primary bg-transparent px-2 py-1.5 font-medium *:[svg]:-me-0.5 *:[svg]:size-3.5\">\n                            {link.label}\n                          </NavigationMenuTrigger>\n                          <NavigationMenuContent className=\"data-[motion=from-end]:slide-in-from-right-16! data-[motion=from-start]:slide-in-from-left-16! data-[motion=to-end]:slide-out-to-right-16! data-[motion=to-start]:slide-out-to-left-16! z-50 p-1\">\n                            <ul\n                              className={cn(link.type === \"description\" ? \"min-w-64\" : \"min-w-48\")}>\n                              {link.items.map((item, itemIndex) => (\n                                <li key={itemIndex}>\n                                  <NavigationMenuLink href={item.href} className=\"py-1.5\">\n                                    {/* Display icon if present */}\n                                    {link.type === \"icon\" && \"icon\" in item && (\n                                      <div className=\"flex items-center gap-2\">\n                                        {item.icon === \"BookOpenIcon\" && (\n                                          <BookOpenIcon\n                                            size={16}\n                                            className=\"text-foreground opacity-60\"\n                                            aria-hidden=\"true\"\n                                          />\n                                        )}\n                                        {item.icon === \"LifeBuoyIcon\" && (\n                                          <LifeBuoyIcon\n                                            size={16}\n                                            className=\"text-foreground opacity-60\"\n                                            aria-hidden=\"true\"\n                                          />\n                                        )}\n                                        {item.icon === \"InfoIcon\" && (\n                                          <InfoIcon\n                                            size={16}\n                                            className=\"text-foreground opacity-60\"\n                                            aria-hidden=\"true\"\n                                          />\n                                        )}\n                                        <span>{item.label}</span>\n                                      </div>\n                                    )}\n\n                                    {/* Display label with description if present */}\n                                    {link.type === \"description\" && \"description\" in item ? (\n                                      <div className=\"space-y-1\">\n                                        <div className=\"font-medium\">{item.label}</div>\n                                        <p className=\"text-muted-foreground line-clamp-2 text-xs\">\n                                          {item.description}\n                                        </p>\n                                      </div>\n                                    ) : (\n                                      // Display simple label if not icon or description type\n                                      !link.type ||\n                                      (link.type !== \"icon\" && link.type !== \"description\" && (\n                                        <span>{item.label}</span>\n                                      ))\n                                    )}\n                                  </NavigationMenuLink>\n                                </li>\n                              ))}\n                            </ul>\n                          </NavigationMenuContent>\n                        </>\n                      ) : (\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                      )}\n                    </NavigationMenuItem>\n                  ))}\n                </NavigationMenuList>\n              </NavigationMenu>\n            </div>\n          </div>\n          {/* Right side */}\n          <div className=\"flex items-center gap-2\">\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=\"#\">Get Started</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-02.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}