{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar-mega",
  "title": "Mega menu navbar",
  "description": "Top bar with a keyboard-accessible Product mega menu, search, sign-in and a slide-over mobile menu.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "accordion",
    "button",
    "dropdown-menu",
    "sheet"
  ],
  "files": [
    {
      "path": "src/components/blocks/navbar-mega.tsx",
      "content": "import {\n  ArrowRightIcon,\n  BarChart3Icon,\n  BellRingIcon,\n  ChevronDownIcon,\n  MenuIcon,\n  PlugIcon,\n  SearchIcon,\n  ShieldCheckIcon,\n  WorkflowIcon,\n  ZapIcon,\n} from \"lucide-react\";\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/components/ui/sheet\";\n\nconst BRAND = \"Northwind\";\n\nconst PRODUCT = [\n  { title: \"Automations\", description: \"Trigger workflows from any event\", icon: WorkflowIcon },\n  { title: \"Analytics\", description: \"Dashboards your team will read\", icon: BarChart3Icon },\n  { title: \"Integrations\", description: \"120+ apps, two-way sync\", icon: PlugIcon },\n  { title: \"Alerts\", description: \"Page the right person, once\", icon: BellRingIcon },\n  { title: \"Edge runtime\", description: \"Runs in 30 regions, under 50ms\", icon: ZapIcon },\n  { title: \"Security\", description: \"SSO, audit logs and SOC 2\", icon: ShieldCheckIcon },\n];\n\nconst LINKS = [\"Customers\", \"Pricing\", \"Docs\"];\n\nconst FEATURED = {\n  badge: \"New\",\n  title: \"Northwind 3.0\",\n  description: \"Branching workflows, a faster editor and live collaboration.\",\n  cta: \"Read the launch notes\",\n};\n\nfunction Logo() {\n  return (\n    <a\n      href=\"#\"\n      className=\"flex shrink-0 items-center gap-2 rounded-md font-semibold tracking-tight focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n    >\n      <svg aria-hidden viewBox=\"0 0 32 32\" className=\"size-7\">\n        <rect width=\"32\" height=\"32\" rx=\"9\" className=\"fill-primary\" />\n        <path d=\"M10 22V10l12 12V10\" fill=\"none\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className=\"stroke-primary-foreground\" />\n      </svg>\n      {BRAND}\n    </a>\n  );\n}\n\nconst linkClass =\n  \"rounded-lg px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\";\n\n/**\n * Classic top bar: logo, links with a \"Product\" mega menu (a Radix menu, so\n * arrow keys, Escape and focus return work out of the box), search, sign-in\n * and a primary CTA. Below `md` the links move into a slide-over sheet. The\n * faded page underneath is placeholder content — delete it when you use the\n * navbar.\n */\nexport function NavbarMega() {\n  return (\n    <div className=\"relative isolate\">\n      <header className=\"sticky top-0 z-40 border-b bg-background/80 backdrop-blur-md\">\n        <nav aria-label=\"Main\" className=\"mx-auto flex h-16 max-w-7xl items-center gap-6 px-6 lg:px-8\">\n          <Logo />\n\n          <ul className=\"hidden items-center gap-0.5 md:flex\">\n            <li>\n              <DropdownMenu modal={false}>\n                <DropdownMenuTrigger asChild>\n                  <button type=\"button\" className={`group/product inline-flex items-center gap-1 data-[state=open]:bg-muted data-[state=open]:text-foreground ${linkClass}`}>\n                    Product\n                    <ChevronDownIcon aria-hidden className=\"size-3.5 transition-transform duration-200 group-data-[state=open]/product:rotate-180 motion-reduce:transition-none\" />\n                  </button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  sideOffset={14}\n                  className=\"w-152 max-w-(--radix-dropdown-menu-content-available-width) rounded-2xl p-2 shadow-xl shadow-foreground/5\"\n                >\n                  <div className=\"grid grid-cols-[1fr_13rem] gap-2\">\n                    <div>\n                      <DropdownMenuLabel className=\"px-2.5 pt-2 pb-1\">Platform</DropdownMenuLabel>\n                      <div className=\"grid grid-cols-2\">\n                        {PRODUCT.map(({ title, description, icon: Icon }) => (\n                          <DropdownMenuItem key={title} asChild className=\"items-start gap-3 rounded-xl p-2.5\">\n                            <a href=\"#\">\n                              <span className=\"grid size-9 shrink-0 place-items-center rounded-lg border bg-background text-primary shadow-xs\">\n                                <Icon className=\"size-4\" />\n                              </span>\n                              <span className=\"grid gap-0.5\">\n                                <span className=\"font-medium text-foreground\">{title}</span>\n                                <span className=\"text-xs leading-snug text-muted-foreground\">{description}</span>\n                              </span>\n                            </a>\n                          </DropdownMenuItem>\n                        ))}\n                      </div>\n                    </div>\n\n                    <div className=\"relative flex flex-col overflow-hidden rounded-xl border bg-linear-to-br from-brand-from/15 via-brand-via/5 to-brand-to/15 p-4\">\n                      {/* Mini release chart */}\n                      <div aria-hidden className=\"flex h-16 items-end gap-1\">\n                        {[30, 45, 38, 60, 52, 74, 66, 90].map((h, i) => (\n                          <span key={i} className=\"flex-1 rounded-sm bg-primary/30 last:bg-primary\" style={{ height: `${h}%` }} />\n                        ))}\n                      </div>\n                      <span className=\"mt-4 w-fit rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary\">\n                        {FEATURED.badge}\n                      </span>\n                      <p className=\"mt-2 font-medium\">{FEATURED.title}</p>\n                      <p className=\"mt-1 text-xs leading-relaxed text-muted-foreground\">{FEATURED.description}</p>\n                      <DropdownMenuItem asChild className=\"-mx-1.5 mt-auto rounded-lg px-1.5 pt-3 font-medium text-primary\">\n                        <a href=\"#\">\n                          {FEATURED.cta} <ArrowRightIcon className=\"size-3.5\" />\n                        </a>\n                      </DropdownMenuItem>\n                    </div>\n                  </div>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </li>\n            {LINKS.map((label) => (\n              <li key={label}>\n                <a href=\"#\" className={`block ${linkClass}`}>\n                  {label}\n                </a>\n              </li>\n            ))}\n          </ul>\n\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Button variant=\"outline\" className=\"hidden h-9 w-52 justify-start gap-2 rounded-lg px-3 font-normal text-muted-foreground lg:inline-flex\">\n              <SearchIcon />\n              Search…\n              <kbd aria-hidden className=\"ml-auto rounded border bg-muted px-1.5 font-mono text-[0.7rem] text-muted-foreground\">\n                ⌘K\n              </kbd>\n            </Button>\n            <Button variant=\"ghost\" size=\"icon-lg\" aria-label=\"Search\" className=\"lg:hidden\">\n              <SearchIcon />\n            </Button>\n            <Button variant=\"ghost\" className=\"hidden h-9 px-3 md:inline-flex\" asChild>\n              <a href=\"#\">Sign in</a>\n            </Button>\n            <Button className=\"hidden h-9 px-3.5 sm:inline-flex\" asChild>\n              <a href=\"#\">Get started</a>\n            </Button>\n\n            <Sheet>\n              <SheetTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon-lg\" aria-label=\"Open menu\" className=\"md:hidden\">\n                  <MenuIcon />\n                </Button>\n              </SheetTrigger>\n              <SheetContent side=\"right\" className=\"w-full gap-0 overflow-y-auto sm:max-w-sm\">\n                <SheetHeader className=\"border-b px-6 py-4\">\n                  <SheetTitle>{BRAND}</SheetTitle>\n                  <SheetDescription className=\"sr-only\">Site navigation</SheetDescription>\n                </SheetHeader>\n                <nav aria-label=\"Mobile\" className=\"px-4 py-3\">\n                  <Accordion type=\"single\" collapsible>\n                    <AccordionItem value=\"product\" className=\"border-b-0\">\n                      <AccordionTrigger className=\"rounded-lg px-2 py-3 text-base hover:bg-muted hover:no-underline\">\n                        Product\n                      </AccordionTrigger>\n                      <AccordionContent className=\"pb-2 [&_a]:no-underline\">\n                        <ul className=\"grid gap-0.5 pl-2\">\n                          {PRODUCT.map(({ title, icon: Icon }) => (\n                            <li key={title}>\n                              <SheetClose asChild>\n                                <a href=\"#\" className=\"flex items-center gap-3 rounded-lg px-2 py-2 text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\">\n                                  <Icon aria-hidden className=\"size-4 text-primary\" />\n                                  {title}\n                                </a>\n                              </SheetClose>\n                            </li>\n                          ))}\n                        </ul>\n                      </AccordionContent>\n                    </AccordionItem>\n                  </Accordion>\n                  <ul>\n                    {LINKS.map((label) => (\n                      <li key={label}>\n                        <SheetClose asChild>\n                          <a href=\"#\" className=\"block rounded-lg px-2 py-3 text-base font-medium hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\">\n                            {label}\n                          </a>\n                        </SheetClose>\n                      </li>\n                    ))}\n                  </ul>\n                </nav>\n                <SheetFooter className=\"grid grid-cols-2 border-t px-6 py-4\">\n                  <Button variant=\"outline\" size=\"lg\" asChild>\n                    <a href=\"#\">Sign in</a>\n                  </Button>\n                  <Button size=\"lg\" asChild>\n                    <a href=\"#\">Get started</a>\n                  </Button>\n                </SheetFooter>\n              </SheetContent>\n            </Sheet>\n          </div>\n        </nav>\n      </header>\n\n      {/* Placeholder page content — replace with your own */}\n      <div aria-hidden className=\"relative overflow-hidden px-6 py-20 sm:py-24 lg:px-8\">\n        <div className=\"absolute inset-0 -z-10 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-size-[3rem_3rem] mask-[radial-gradient(ellipse_at_50%_0%,black,transparent_70%)] opacity-60\" />\n        <div className=\"mx-auto max-w-7xl\">\n          <div className=\"h-6 w-40 rounded-full bg-primary/15\" />\n          <div className=\"mt-6 h-10 w-full max-w-2xl rounded-xl bg-muted sm:h-12\" />\n          <div className=\"mt-3 h-10 w-3/5 max-w-lg rounded-xl bg-muted sm:h-12\" />\n          <div className=\"mt-8 h-3 w-full max-w-xl rounded-full bg-muted/70\" />\n          <div className=\"mt-3 h-3 w-2/3 max-w-md rounded-full bg-muted/70\" />\n          <div className=\"mt-10 flex gap-3\">\n            <div className=\"h-10 w-32 rounded-lg bg-primary/25\" />\n            <div className=\"h-10 w-28 rounded-lg border bg-background/60\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/blocks/navbar-mega.tsx"
    }
  ],
  "categories": [
    "navbars"
  ],
  "type": "registry:block"
}