{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-2",
  "title": "Header 2: mega menu with mobile sheet",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Sticky header with brand, a mega menu of grouped links and a featured card, sign-in and primary actions. On phones the same links open in a slide-in sheet with accordions.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/button.json",
    "https://ui.ballmac.com/r/mega-menu.json",
    "https://ui.ballmac.com/r/sheet.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/header-2/header-2.tsx",
      "content": "// Ballmac UI: Header 2. https://ui.ballmac.com/blocks/header-2\n\"use client\"\n\nimport * as React from \"react\"\nimport { BarChart3, Blocks, BookOpen, Code2, Layers, LifeBuoy, Menu, ShieldCheck, Sparkles, Users, Workflow } from \"lucide-react\"\n\nimport { buttonVariants } from \"@/components/ballmac/button\"\nimport { MegaMenu, MegaMenuMobileList, type MegaMenuItem } from \"@/components/ballmac/mega-menu\"\nimport { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from \"@/components/ballmac/sheet\"\nimport { cn } from \"@/lib/utils\"\n\ntype Action = { label: string; href: string }\n\ntype Header2Props = React.ComponentProps<\"header\"> & {\n  /** Brand name beside the logo mark. */\n  brand?: string\n  /** Where the brand links to. */\n  brandHref?: string\n  /** Logo mark. Defaults to a simple rounded square with the brand's first letter. */\n  logo?: React.ReactNode\n  /** Navigation: links, or panels with grouped links and an optional featured card. */\n  items?: MegaMenuItem[]\n  /** Quiet action on the right, e.g. sign in. */\n  secondaryAction?: Action\n  /** Main action on the right. */\n  primaryAction?: Action\n  /** Stick to the top of the page with a blurred background. */\n  sticky?: boolean\n}\n\nconst defaultItems: MegaMenuItem[] = [\n  {\n    label: \"Product\",\n    columns: [\n      {\n        title: \"Build\",\n        links: [\n          { title: \"Workspaces\", href: \"#\", description: \"Projects, files and approvals in one place.\", icon: <Layers /> },\n          { title: \"Automations\", href: \"#\", description: \"Run tasks when things change.\", icon: <Workflow />, badge: \"New\" },\n          { title: \"API\", href: \"#\", description: \"Build on the same data.\", icon: <Code2 /> },\n        ],\n      },\n      {\n        title: \"Run\",\n        links: [\n          { title: \"Analytics\", href: \"#\", description: \"Usage and performance at a glance.\", icon: <BarChart3 /> },\n          { title: \"Security\", href: \"#\", description: \"Roles, audit logs and sign-in policies.\", icon: <ShieldCheck /> },\n          { title: \"Integrations\", href: \"#\", description: \"Connect the tools you already use.\", icon: <Blocks /> },\n        ],\n      },\n    ],\n    featured: { title: \"What’s new\", description: \"See the latest releases and what they change for your team.\", href: \"#\", media: <Sparkles />, cta: \"Read the changelog\" },\n  },\n  {\n    label: \"Solutions\",\n    columns: [\n      {\n        links: [\n          { title: \"Startups\", href: \"#\", description: \"Move fast with a small team.\", icon: <Users /> },\n          { title: \"Enterprise\", href: \"#\", description: \"Controls for larger organizations.\", icon: <ShieldCheck /> },\n        ],\n      },\n    ],\n  },\n  {\n    label: \"Resources\",\n    columns: [\n      {\n        links: [\n          { title: \"Documentation\", href: \"#\", description: \"Guides and API reference.\", icon: <BookOpen /> },\n          { title: \"Help center\", href: \"#\", description: \"Answers from our support team.\", icon: <LifeBuoy /> },\n        ],\n      },\n    ],\n  },\n  { label: \"Pricing\", href: \"#\" },\n]\n\nfunction Header2({\n  brand = \"Acme\",\n  brandHref = \"#\",\n  logo,\n  items = defaultItems,\n  secondaryAction = { label: \"Sign in\", href: \"#\" },\n  primaryAction = { label: \"Get started\", href: \"#\" },\n  sticky = true,\n  className,\n  ...props\n}: Header2Props) {\n  const [open, setOpen] = React.useState(false)\n  return (\n    <header data-slot=\"header-2\" className={cn(\"bg-background/80 z-40 w-full border-b backdrop-blur-xl\", sticky && \"sticky top-0\", className)} {...props}>\n      <div className=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-4 sm:px-6\">\n        <a href={brandHref} className=\"focus-visible:ring-ring/50 flex items-center gap-2.5 rounded-md text-lg font-semibold tracking-tight outline-none focus-visible:ring-[3px]\">\n          {logo ?? (\n            <span aria-hidden=\"true\" className=\"bg-foreground text-background flex size-7 items-center justify-center rounded-lg text-sm font-bold\">\n              {brand[0]}\n            </span>\n          )}\n          {brand}\n        </a>\n        <MegaMenu items={items} label=\"Main\" viewportAlign=\"start\" />\n        <div className=\"ms-auto hidden items-center gap-2 md:flex\">\n          <a className={buttonVariants({ variant: \"ghost\" })} href={secondaryAction.href}>{secondaryAction.label}</a>\n          <a className={buttonVariants({ shape: \"pill\" })} href={primaryAction.href}>{primaryAction.label}</a>\n        </div>\n        <Sheet open={open} onOpenChange={setOpen}>\n          <SheetTrigger className={buttonVariants({ variant: \"ghost\", size: \"icon\", className: \"ms-auto md:hidden\" })} aria-label=\"Open menu\">\n            <Menu />\n          </SheetTrigger>\n          <SheetContent side=\"end\" closeLabel=\"Close menu\" className=\"w-[min(22rem,90vw)]\">\n            <SheetHeader>\n              <SheetTitle>{brand}</SheetTitle>\n              <SheetDescription className=\"sr-only\">Site navigation</SheetDescription>\n            </SheetHeader>\n            <SheetBody>\n              <MegaMenuMobileList items={items} onNavigate={() => setOpen(false)} />\n            </SheetBody>\n            <SheetFooter className=\"grid gap-2\">\n              <a className={buttonVariants({ shape: \"pill\", size: \"lg\" })} href={primaryAction.href}>{primaryAction.label}</a>\n              <a className={buttonVariants({ variant: \"outline\", shape: \"pill\", size: \"lg\" })} href={secondaryAction.href}>{secondaryAction.label}</a>\n            </SheetFooter>\n          </SheetContent>\n        </Sheet>\n      </div>\n    </header>\n  )\n}\n\nexport { Header2, type Header2Props }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/header-2/header-2.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "header",
      "navbar",
      "mega menu",
      "navigation",
      "sheet",
      "mobile"
    ],
    "version": "1.0.0",
    "updated": "2026-10-01",
    "ai": {
      "summary": "A navigation header for products with many pages. Pass items (the same shape as mega-menu), brand, logo, secondaryAction and primaryAction.",
      "whenToUse": [
        "Sites with several product areas",
        "Anything that outgrew four top-level links"
      ],
      "whenNotToUse": [
        "Simple sites with a few links (use header-1)"
      ],
      "composesWith": [
        "hero-6",
        "hero-7",
        "footer-2",
        "template-launch"
      ],
      "a11y": [
        {
          "keys": "Arrow Left / Right",
          "action": "Moves between menu triggers"
        },
        {
          "keys": "Arrow Down / Enter",
          "action": "Opens a panel"
        },
        {
          "keys": "Escape",
          "action": "Closes a panel or the mobile sheet and returns focus"
        }
      ],
      "customization": [
        "items: MegaMenuItem[] (links, or panels with columns and a featured card)",
        "logo, brand, brandHref",
        "sticky: false for a static header"
      ]
    },
    "examples": [
      "header-2-demo",
      "header-2-simple"
    ],
    "url": "https://ui.ballmac.com/components/header-2"
  },
  "categories": [
    "blocks",
    "header"
  ],
  "type": "registry:block"
}