{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-01",
  "title": "Navbar 01",
  "description": "Responsive navbar with dropdown navigation menus on desktop and an accordion-based mobile menu. Use it as your site-wide header to provide clear, accessible navigation across all screen sizes and devices.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "sheet",
    "navigation-menu",
    "accordion"
  ],
  "files": [
    {
      "path": "src/registry/blocks/navbar-01/navbar.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\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 {\n  Sheet,\n  SheetContent,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\";\nimport {\n  Blocks,\n  ChevronDown,\n  Layers,\n  Menu,\n  Sparkles,\n  Sunset,\n} from \"lucide-react\";\n\n// ---- Types ----\n\ninterface NavSubItem {\n  text: string;\n  url: string;\n  description?: string;\n  icon?: React.ReactNode;\n}\n\ninterface NavItemSimple {\n  type: \"link\";\n  text: string;\n  url: string;\n}\n\ninterface NavItemMenu {\n  type: \"menu\";\n  title: string;\n  items: NavSubItem[];\n}\n\ntype NavItem = NavItemSimple | NavItemMenu;\n\ninterface NavButton {\n  text: string;\n  url: string;\n  variant?: \"default\" | \"outline\" | \"ghost\" | \"secondary\";\n}\n\ninterface Navbar01Props {\n  logo?: React.ReactNode;\n  navItems?: NavItem[];\n  buttons?: NavButton[];\n  className?: string;\n}\n\n// ---- Desktop menu item card ----\n\nconst SubItemCard = ({ item }: { item: NavSubItem }) => (\n  <NavigationMenuLink asChild>\n    <a\n      href={item.url}\n      className=\"flex items-start gap-2 rounded-md p-4 transition-colors hover:bg-muted\"\n    >\n      {item.icon && (\n        <div className=\"mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md border bg-background text-muted-foreground\">\n          {item.icon}\n        </div>\n      )}\n      <div>\n        <p className=\"text-sm leading-snug font-semibold\">{item.text}</p>\n        {item.description && (\n          <p className=\"mt-0.5 text-sm leading-snug text-muted-foreground\">\n            {item.description}\n          </p>\n        )}\n      </div>\n    </a>\n  </NavigationMenuLink>\n);\n\n// ---- Mobile accordion group ----\n\nconst MobileMenuGroup = ({ item }: { item: NavItemMenu }) => {\n  const [open, setOpen] = useState(false);\n  return (\n    <div>\n      <button\n        onClick={() => setOpen(!open)}\n        className=\"flex w-full items-center justify-between py-3 text-base font-semibold\"\n      >\n        {item.title}\n        <ChevronDown\n          className={cn(\n            \"size-4 text-muted-foreground transition-transform\",\n            open && \"rotate-180\",\n          )}\n        />\n      </button>\n      {open && (\n        <div className=\"flex flex-col gap-1 pb-2 pl-2\">\n          {item.items.map((sub) => (\n            <a\n              key={sub.text}\n              href={sub.url}\n              className=\"flex items-center gap-2 rounded-md py-2 text-sm text-muted-foreground hover:text-foreground\"\n            >\n              {sub.icon && (\n                <span className=\"flex size-7 items-center justify-center rounded border bg-muted text-muted-foreground\">\n                  {sub.icon}\n                </span>\n              )}\n              {sub.text}\n            </a>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ---- Main component ----\n\nconst Navbar01 = ({\n  logo = (\n    <a href=\"/\" className=\"flex items-center gap-2\">\n      <img src=\"/logo.svg\" alt=\"Shadcnship\" className=\"size-5 dark:invert\" />\n      <span className=\"font-semibold\">Shadcnship</span>\n    </a>\n  ),\n  navItems = [\n    {\n      type: \"menu\",\n      title: \"Menu\",\n      items: [\n        {\n          text: \"Components\",\n          url: \"#\",\n          description: \"Beautiful UI components built with Tailwind CSS.\",\n          icon: <Blocks className=\"size-4 shrink-0\" />,\n        },\n        {\n          text: \"Templates\",\n          url: \"#\",\n          description: \"Ready-to-use templates for your next project.\",\n          icon: <Layers className=\"size-4 shrink-0\" />,\n        },\n        {\n          text: \"Blocks\",\n          url: \"#\",\n          description: \"Pre-built sections to speed up development.\",\n          icon: <Sparkles className=\"size-4 shrink-0\" />,\n        },\n        {\n          text: \"Themes\",\n          url: \"#\",\n          description: \"Beautiful themes to customize your app.\",\n          icon: <Sunset className=\"size-4 shrink-0\" />,\n        },\n      ],\n    },\n    { type: \"link\", text: \"Features\", url: \"#\" },\n    { type: \"link\", text: \"Product\", url: \"#\" },\n    { type: \"link\", text: \"Blog\", url: \"#\" },\n    { type: \"link\", text: \"Pricing\", url: \"#\" },\n  ],\n  buttons = [\n    { text: \"Sign in\", url: \"#\", variant: \"ghost\" },\n    { text: \"Get Started\", url: \"#\", variant: \"default\" },\n  ],\n  className,\n}: Navbar01Props) => (\n  <header className={cn(\"fixed top-0 w-full border-b\", className)}>\n    <div className=\"container mx-auto flex h-14 items-center justify-between px-6 md:px-12\">\n      {/* Logo */}\n      <div className=\"shrink-0\">{logo}</div>\n\n      {/* Desktop nav */}\n      <nav className=\"hidden items-center lg:flex\">\n        <NavigationMenu>\n          <NavigationMenuList>\n            {navItems.map((item) =>\n              item.type === \"menu\" ? (\n                <NavigationMenuItem key={item.title}>\n                  <NavigationMenuTrigger className=\"bg-transparent text-sm font-medium\">\n                    {item.title}\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid w-[520px] grid-cols-2 gap-1 p-3\">\n                      {item.items.map((sub) => (\n                        <li key={sub.text}>\n                          <SubItemCard item={sub} />\n                        </li>\n                      ))}\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n              ) : (\n                <NavigationMenuItem key={item.text}>\n                  <NavigationMenuLink asChild>\n                    <a\n                      href={item.url}\n                      className=\"inline-flex h-9 items-center px-4 text-sm font-medium text-foreground/80 transition-colors hover:text-foreground\"\n                    >\n                      {item.text}\n                    </a>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              ),\n            )}\n          </NavigationMenuList>\n        </NavigationMenu>\n      </nav>\n\n      {/* Desktop CTA buttons */}\n      <div className=\"hidden items-center gap-2 lg:flex\">\n        {buttons.map((btn) => (\n          <Button key={btn.text} variant={btn.variant ?? \"default\"} asChild>\n            <a href={btn.url}>{btn.text}</a>\n          </Button>\n        ))}\n      </div>\n\n      {/* Mobile hamburger */}\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\" size=\"icon\" className=\"lg:hidden\">\n            <Menu className=\"size-5\" />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"right\" className=\"w-80 p-0\">\n          <SheetHeader className=\"border-b px-6 py-4\">\n            <SheetTitle asChild>\n              <div>{logo}</div>\n            </SheetTitle>\n          </SheetHeader>\n          <div className=\"flex flex-col px-6 py-4\">\n            {navItems.map((item) =>\n              item.type === \"menu\" ? (\n                <MobileMenuGroup key={item.title} item={item} />\n              ) : (\n                <a\n                  key={item.text}\n                  href={item.url}\n                  className=\"py-3 text-base font-semibold hover:text-muted-foreground\"\n                >\n                  {item.text}\n                </a>\n              ),\n            )}\n          </div>\n          <div className=\"mt-auto flex flex-col gap-3 border-t px-6 py-6\">\n            {buttons.map((btn) => (\n              <Button\n                key={btn.text}\n                variant={btn.variant === \"ghost\" ? \"outline\" : btn.variant}\n                className=\"w-full\"\n                asChild\n              >\n                <a href={btn.url}>{btn.text}</a>\n              </Button>\n            ))}\n          </div>\n        </SheetContent>\n      </Sheet>\n    </div>\n  </header>\n);\n\nexport default Navbar01;\nexport type { NavItem, NavSubItem, NavButton, Navbar01Props };\n",
      "type": "registry:component",
      "target": "components/navbar-01.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/navbar-01.webp",
    "imageDark": "/r/previews/navbar-01-dark.webp",
    "prose": {
      "about": "Navbar 01 is a responsive site header with a logo, dropdown navigation menus on desktop, and a collapsible accordion-style mobile menu. Built with shadcn/ui NavigationMenu and Sheet components, the dropdown menus support multi-item groups with icons and descriptions. The mobile menu slides in as a Sheet from the left. Authentication state (logged in / logged out) is configurable via props to show different CTA buttons.",
      "whenToUse": [
        "Multi-page marketing sites that need a top-level navigation with product, resources, and company sections",
        "SaaS products where the navbar needs to change between logged-in and logged-out states",
        "Sites with complex navigation hierarchies that benefit from grouped dropdown menus",
        "Any Next.js 15 App Router project that needs an accessible, mobile-first header with minimal setup"
      ],
      "notes": "The mobile menu uses a shadcn/ui Sheet component — it is accessible by default with proper focus trapping and aria attributes. Avoid nesting more than two levels of navigation items, as deep hierarchies are difficult to use on mobile.",
      "faqs": [
        {
          "question": "Can the navbar show different content for logged-in users?",
          "answer": "Yes, authentication state is a prop that controls which CTA buttons render."
        },
        {
          "question": "How deep can the dropdown menus nest?",
          "answer": "Keep it to two levels — deeper hierarchies are hard to use on the mobile accordion menu."
        },
        {
          "question": "Is the mobile menu accessible?",
          "answer": "Yes, it uses the shadcn/ui Sheet component, which handles focus trapping and ARIA attributes by default."
        }
      ]
    }
  },
  "categories": [
    "navigation"
  ],
  "type": "registry:block"
}