{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "header-mega-menu",
  "title": "Header — Mega Menu",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/header-mega-menu/HeaderMegaMenu.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRight, BarChart3, BookOpen, Boxes, Layers, LifeBuoy, Lock, Menu, Workflow } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/components/ui/navigation-menu'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst menus = [\n  {\n    label: 'Product',\n    groups: [\n      {\n        heading: 'Core',\n        items: [\n          { icon: Boxes, title: 'Metric layer', body: 'Versioned definitions your whole org shares.' },\n          { icon: BarChart3, title: 'Dashboards', body: 'Composed from certified metrics, not raw SQL.' },\n          { icon: Workflow, title: 'Pipelines', body: 'Scheduled materialisation with cost ceilings.' },\n        ],\n      },\n      {\n        heading: 'Governance',\n        items: [\n          { icon: Lock, title: 'Row-level access', body: 'Scope evaluated per query, per identity.' },\n          { icon: BookOpen, title: 'Change history', body: 'Every definition edit reviewed and revertible.' },\n          { icon: LifeBuoy, title: 'Audit exports', body: 'Generated from the same history, not by hand.' },\n        ],\n      },\n    ],\n    highlight: {\n      title: 'Ship your first dashboard today',\n      body: 'Connect a warehouse, publish one certified metric, and invite the team. No migration required.',\n      cta: 'Start the walkthrough',\n    },\n  },\n  {\n    label: 'Resources',\n    groups: [\n      {\n        heading: 'Learn',\n        items: [\n          { icon: BookOpen, title: 'Documentation', body: 'Setup, modelling, and the access model.' },\n          { icon: Layers, title: 'Guides', body: 'Reconciliation and first-close checklists.' },\n          { icon: BarChart3, title: 'Benchmarks', body: 'Close speed across 240 finance teams.' },\n        ],\n      },\n      {\n        heading: 'Support',\n        items: [\n          { icon: LifeBuoy, title: 'Help centre', body: 'Answers to the questions support gets most.' },\n          { icon: Workflow, title: 'Status', body: 'Live uptime and incident history.' },\n          { icon: Lock, title: 'Trust centre', body: 'SOC 2, subprocessors, and data residency.' },\n        ],\n      },\n    ],\n    highlight: {\n      title: 'Read the rollout plan',\n      body: 'The five-week implementation we run for every customer, written down so you can run it yourself.',\n      cta: 'Open the plan',\n    },\n  },\n]\n\nconst plainLinks = [\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Customers', href: '#customers' },\n]\n\nconst open = ref(false)\n</script>\n\n<template>\n  <header data-slot=\"header-mega-menu\" class=\"border-border bg-background/90 border-b backdrop-blur\">\n    <div class=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n      <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n        <Layers class=\"text-primary size-5\" aria-hidden=\"true\" />\n        Northwind\n      </a>\n\n      <NavigationMenu class=\"hidden lg:flex\">\n        <NavigationMenuList>\n          <NavigationMenuItem v-for=\"menu in menus\" :key=\"menu.label\">\n            <NavigationMenuTrigger>{{ menu.label }}</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <div class=\"grid w-[46rem] grid-cols-[1fr_1fr_16rem] gap-6 p-6\">\n                <div v-for=\"group in menu.groups\" :key=\"group.heading\">\n                  <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">\n                    {{ group.heading }}\n                  </p>\n                  <ul class=\"mt-3 space-y-1\">\n                    <li v-for=\"item in group.items\" :key=\"item.title\">\n                      <a\n                        href=\"#\"\n                        class=\"hover:bg-muted focus-visible:ring-ring flex gap-3 rounded-md p-2 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                      >\n                        <component\n                          :is=\"item.icon\"\n                          class=\"text-muted-foreground mt-0.5 size-4 shrink-0\"\n                          aria-hidden=\"true\"\n                        />\n                        <span class=\"min-w-0\">\n                          <span class=\"block text-sm font-medium\">{{ item.title }}</span>\n                          <span class=\"text-muted-foreground block text-xs leading-snug\">{{ item.body }}</span>\n                        </span>\n                      </a>\n                    </li>\n                  </ul>\n                </div>\n\n                <!-- Highlight rail: one promoted destination per panel, on the\n                     muted surface so it reads as an aside, not a sixth link. -->\n                <div class=\"bg-muted/50 flex flex-col rounded-lg p-4\">\n                  <p class=\"text-sm font-semibold\">{{ menu.highlight.title }}</p>\n                  <p class=\"text-muted-foreground mt-2 text-xs leading-relaxed\">{{ menu.highlight.body }}</p>\n                  <Button variant=\"link\" class=\"mt-auto h-auto justify-start p-0 pt-4 text-xs\">\n                    {{ menu.highlight.cta }}\n                    <ArrowRight class=\"ml-1 size-3\" aria-hidden=\"true\" />\n                  </Button>\n                </div>\n              </div>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n\n          <NavigationMenuItem v-for=\"link in plainLinks\" :key=\"link.href\">\n            <a :href=\"link.href\" :class=\"navigationMenuTriggerStyle()\">{{ link.label }}</a>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n\n      <div class=\"ml-auto flex items-center gap-2\">\n        <Button variant=\"ghost\" size=\"sm\" class=\"hidden sm:inline-flex\">Sign in</Button>\n        <Separator orientation=\"vertical\" class=\"hidden h-5 sm:block\" />\n        <Button size=\"sm\">Book a demo</Button>\n      </div>\n\n      <Sheet v-model:open=\"open\">\n        <SheetTrigger as-child>\n          <Button variant=\"ghost\" size=\"icon\" class=\"ml-auto lg:hidden\" aria-label=\"Open navigation menu\">\n            <Menu class=\"size-5\" aria-hidden=\"true\" />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"right\" class=\"w-72 overflow-y-auto\">\n          <SheetHeader>\n            <SheetTitle>Menu</SheetTitle>\n          </SheetHeader>\n          <nav class=\"mt-6 grid gap-5\" aria-label=\"Mobile\">\n            <div v-for=\"menu in menus\" :key=\"menu.label\">\n              <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{{ menu.label }}</p>\n              <ul class=\"mt-2 grid gap-1\">\n                <li v-for=\"group in menu.groups\" :key=\"group.heading\">\n                  <a\n                    v-for=\"item in group.items\"\n                    :key=\"item.title\"\n                    href=\"#\"\n                    class=\"hover:bg-muted block rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                    @click=\"open = false\"\n                  >\n                    {{ item.title }}\n                  </a>\n                </li>\n              </ul>\n            </div>\n            <Separator />\n            <a\n              v-for=\"link in plainLinks\"\n              :key=\"link.href\"\n              :href=\"link.href\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n              @click=\"open = false\"\n            >\n              {{ link.label }}\n            </a>\n            <Separator />\n            <div class=\"grid gap-2\">\n              <Button variant=\"outline\">Sign in</Button>\n              <Button>Book a demo</Button>\n            </div>\n          </nav>\n        </SheetContent>\n      </Sheet>\n    </div>\n  </header>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HeaderMegaMenu.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/navigation-menu.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/sheet.json"
  ],
  "description": "Navbar whose product and resources items open a full-width mega panel of grouped, described links plus a highlighted feature card, keyboard navigable and closing on Escape.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}