{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "header-mega-menu",
  "title": "Header — Mega Menu",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/header-mega-menu/HeaderMegaMenu.svelte",
      "content": "<script lang=\"ts\">\n  import { ArrowRight, BarChart3, BookOpen, Boxes, Layers, LifeBuoy, Lock, Menu, Workflow } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import {\n    NavigationMenu,\n    NavigationMenuContent,\n    NavigationMenuItem,\n    NavigationMenuLink,\n    NavigationMenuList,\n    NavigationMenuTrigger,\n    navigationMenuTriggerStyle,\n  } from '$lib/components/ui/navigation-menu'\n  import { Separator } from '$lib/components/ui/separator'\n  import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '$lib/components/ui/sheet'\n\n  const 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\n  const plainLinks = [\n    { label: 'Pricing', href: '#pricing' },\n    { label: 'Customers', href: '#customers' },\n  ]\n\n  let open = $state(false)\n</script>\n\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        {#each menus as menu (menu.label)}\n          <NavigationMenuItem value={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                {#each menu.groups as group (group.heading)}\n                  <div>\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                      {#each group.items as item (item.title)}\n                        {@const Icon = item.icon}\n                        <li>\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                            <Icon class=\"text-muted-foreground mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\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                      {/each}\n                    </ul>\n                  </div>\n                {/each}\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        {/each}\n\n        {#each plainLinks as link (link.href)}\n          <NavigationMenuItem value={link.label}>\n            <NavigationMenuLink href={link.href} class={navigationMenuTriggerStyle()}>{link.label}</NavigationMenuLink>\n          </NavigationMenuItem>\n        {/each}\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 bind:open>\n      <SheetTrigger>\n        {#snippet child({ props })}\n          <Button variant=\"ghost\" size=\"icon\" {...props} class=\"ml-auto lg:hidden\" aria-label=\"Open navigation menu\">\n            <Menu class=\"size-5\" aria-hidden=\"true\" />\n          </Button>\n        {/snippet}\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          {#each menus as menu (menu.label)}\n            <div>\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                {#each menu.groups as group (group.heading)}\n                  <li>\n                    {#each group.items as item (item.title)}\n                      <a\n                        href=\"#\"\n                        class=\"hover:bg-muted block rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                        onclick={() => (open = false)}\n                      >\n                        {item.title}\n                      </a>\n                    {/each}\n                  </li>\n                {/each}\n              </ul>\n            </div>\n          {/each}\n          <Separator />\n          {#each plainLinks as link (link.href)}\n            <a\n              href={link.href}\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n              onclick={() => (open = false)}\n            >\n              {link.label}\n            </a>\n          {/each}\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",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/header-mega-menu/HeaderMegaMenu.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/navigation-menu.json",
    "https://uipkge.dev/r/svelte/separator.json",
    "https://uipkge.dev/r/svelte/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"
}