{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"aavya-header-nav-breadcrumb","type":"registry:component","title":"Header — Nav + Breadcrumb","description":"Two-row header: NavigationMenu flyouts on row 1, breadcrumb + date-range toggle on row 2.","version":"0.1.0","status":"alpha","registryDependencies":["navigation-menu","dropdown-menu","breadcrumb","toggle-group","avatar","button","badge"],"files":[{"path":"src/components/layout/header-nav-breadcrumb.tsx","type":"registry:component","content":"'use client'\n\nimport Link from 'next/link'\nimport { usePathname } from 'next/navigation'\nimport { Fragment } from 'react'\nimport {\n  ChevronDown,\n  Code2,\n  Download,\n  Home,\n  ImageIcon,\n  Layers,\n  Menu,\n  Palette,\n  Search,\n  WandSparkles,\n} from 'lucide-react'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/components/ui/breadcrumb'\n\nimport { Button } from '@/components/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/components/ui/navigation-menu'\nimport { Logo } from '@/components/ui/logo'\nimport { ThemeToggle } from '@/components/layout/theme-toggle'\nimport { ProfileDropdown } from '@/components/blocks/profile-dropdown'\nimport { cn } from '@/lib/utils'\n\n// ---------------------------------------------------------------------------\n// Nav data\n// ---------------------------------------------------------------------------\n\nconst navItems = [\n  {\n    label: 'Guidelines',\n    href: '/brand-guidelines',\n    icon: Palette,\n    children: [\n      {\n        label: 'Overview',\n        href: '/brand-guidelines',\n        description: 'Mission, vision, values, and brand principles.',\n      },\n      {\n        label: 'Logo',\n        href: '/brand-guidelines/logo',\n        description: 'Usage rules, clearspace, and approved variations.',\n      },\n      {\n        label: 'Colors',\n        href: '/brand-guidelines/colors',\n        description: 'Primary, secondary, and semantic colour palette.',\n      },\n      {\n        label: 'Typography',\n        href: '/brand-guidelines/typography',\n        description: 'Typefaces, weights, sizes, and usage hierarchy.',\n      },\n    ],\n  },\n  {\n    label: 'Design Tokens',\n    href: '/design-tokens',\n    icon: Layers,\n    children: [\n      {\n        label: 'Colors',\n        href: '/design-tokens/colors',\n        description: 'Full token set for light and dark modes.',\n      },\n      {\n        label: 'Typography',\n        href: '/design-tokens/typography',\n        description: 'Font family, size, weight, and line-height tokens.',\n      },\n      {\n        label: 'Spacing',\n        href: '/design-tokens/spacing',\n        description: 'Scale-based spacing and layout tokens.',\n      },\n      {\n        label: 'Shadows',\n        href: '/design-tokens/shadows',\n        description: 'Elevation and box-shadow tokens.',\n      },\n      {\n        label: 'Border Radius',\n        href: '/design-tokens/border-radius',\n        description: 'Corner radius tokens from sharp to pill.',\n      },\n    ],\n  },\n  {\n    label: 'Assets',\n    href: '/assets',\n    icon: ImageIcon,\n  },\n  {\n    label: 'Registry',\n    href: '/registry',\n    icon: Code2,\n  },\n  {\n    label: 'Example UI',\n    href: '/theme-generator',\n    icon: WandSparkles,\n  },\n  {\n    label: 'Export',\n    href: '/export',\n    icon: Download,\n  },\n]\n\n// ---------------------------------------------------------------------------\n// Breadcrumb helpers — mirrors breadcrumbs.tsx segment map\n// ---------------------------------------------------------------------------\n\nconst segmentLabels: Record<string, string> = {\n  'brand-guidelines': 'Brand Guidelines',\n  'design-tokens': 'Design Tokens',\n  'border-radius': 'Border Radius',\n  registry: 'Registry',\n  'theme-generator': 'Example UI',\n}\n\nfunction getSegmentLabel(segment: string) {\n  return (\n    segmentLabels[segment] ??\n    segment\n      .split('-')\n      .map((p) => p.charAt(0).toUpperCase() + p.slice(1))\n      .join(' ')\n  )\n}\n\n// ---------------------------------------------------------------------------\n// NavListItem\n// ---------------------------------------------------------------------------\n\nfunction NavListItem({\n  href,\n  label,\n  description,\n  active,\n}: {\n  href: string\n  label: string\n  description?: string\n  active?: boolean\n}) {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <Link\n          href={href}\n          className={cn(\n            'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none',\n            'transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',\n            active && 'bg-accent/60',\n          )}\n        >\n          <div className=\"text-sm font-medium leading-none\">{label}</div>\n          {description && (\n            <p className=\"line-clamp-2 text-xs leading-snug text-muted-foreground\">\n              {description}\n            </p>\n          )}\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Main export\n// ---------------------------------------------------------------------------\n\nexport function HeaderNavBreadcrumb() {\n  const pathname = usePathname()\n  const segments = pathname.split('/').filter(Boolean)\n\n  return (\n    <header className=\"sticky top-0 z-40 border-b border-border/80 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80\">\n      {/* ── Row 1: Logo + NavigationMenu + actions ─────────────────────────── */}\n      <div className=\"mx-auto flex h-16 max-w-300 items-center gap-8 px-5 md:px-7\">\n        <Link href=\"/\" aria-label=\"Home\">\n          <div className=\"flex items-center\">\n            <Logo shape=\"mark\" />\n            <span className=\"ml-2.5 hidden text-xl font-semibold sm:block\">Brand</span>\n          </div>\n        </Link>\n\n        <NavigationMenu className=\"hidden lg:flex\">\n          <NavigationMenuList>\n            {navItems.map((item) => {\n              const isActive = item.href\n                ? pathname === item.href || pathname.startsWith(item.href + '/')\n                : false\n\n              return item.children ? (\n                <NavigationMenuItem key={item.label}>\n                  <NavigationMenuTrigger\n                    className={cn(\n                      'bg-transparent text-sm font-medium',\n                      isActive && 'text-foreground',\n                    )}\n                  >\n                    {item.label}\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid w-90 gap-1 p-3 md:w-110 md:grid-cols-2\">\n                      {item.children.map((child) => (\n                        <NavListItem\n                          key={child.label}\n                          href={child.href}\n                          label={child.label}\n                          description={child.description}\n                          active={pathname === child.href}\n                        />\n                      ))}\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n              ) : (\n                <NavigationMenuItem key={item.label}>\n                  <NavigationMenuLink\n                    asChild\n                    className={cn(\n                      navigationMenuTriggerStyle(),\n                      isActive && 'font-semibold text-foreground',\n                    )}\n                  >\n                    <Link href={item.href ?? '#'}>{item.label}</Link>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              )\n            })}\n          </NavigationMenuList>\n        </NavigationMenu>\n\n        {/* Mobile nav */}\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-9 max-w-42.5 justify-start gap-2 rounded-full px-3 lg:hidden\"\n              aria-label=\"Open navigation\"\n            >\n              {(() => {\n                const active = navItems.find(\n                  (item) => item.href && (pathname === item.href || pathname.startsWith(item.href + '/')),\n                )\n                return active ? (\n                  <>\n                    <active.icon className=\"h-4 w-4 shrink-0\" />\n                    <span className=\"truncate text-sm\">{active.label}</span>\n                  </>\n                ) : (\n                  <>\n                    <Menu className=\"h-4 w-4 shrink-0\" />\n                    <span className=\"truncate text-sm\">Navigation</span>\n                  </>\n                )\n              })()}\n              <ChevronDown className=\"ml-auto h-3.5 w-3.5 opacity-70\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\" className=\"w-56\">\n            <DropdownMenuLabel>Navigate</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            {navItems.map((item) => {\n              const isActive = item.href\n                ? pathname === item.href || pathname.startsWith(item.href + '/')\n                : false\n              return (\n                <DropdownMenuItem key={item.href} asChild>\n                  <Link href={item.href ?? '#'} className={cn(isActive && 'font-semibold text-foreground')}>\n                    <item.icon className=\"mr-2 h-4 w-4\" />\n                    {item.label}\n                  </Link>\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n\n        <div className=\"ml-auto flex items-center gap-0.5 sm:gap-1\">\n          <ThemeToggle />\n\n          <Button variant=\"ghost\" size=\"icon\" className=\"hidden sm:inline-flex\" asChild>\n            <Link href=\"/search\">\n              <Search className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Search</span>\n            </Link>\n          </Button>\n            <ProfileDropdown loginRedirect={pathname} />\n        </div>\n      </div>\n\n      {/* ── Row 2: dynamic breadcrumb ──────────────────────────────────────── */}\n      <div className=\"border-t border-border/50 bg-background/80\">\n        <div className=\"mx-auto flex h-10 max-w-300 items-center px-5 md:px-7\">\n          <Breadcrumb className=\"overflow-x-auto\">\n            <BreadcrumbList className=\"flex-nowrap p-1 *:whitespace-nowrap\">\n              <BreadcrumbItem>\n                <BreadcrumbLink href=\"/\" aria-label=\"Home\">\n                  <Home className=\"size-4\" />\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              {segments.map((segment, index) => {\n                const href = `/${segments.slice(0, index + 1).join('/')}`\n                const isLast = index === segments.length - 1\n                return (\n                  <Fragment key={href}>\n                    <BreadcrumbSeparator />\n                    <BreadcrumbItem>\n                      {isLast ? (\n                        <BreadcrumbPage className=\"font-medium\">\n                          {getSegmentLabel(segment)}\n                        </BreadcrumbPage>\n                      ) : (\n                        <BreadcrumbLink asChild>\n                          <Link href={href}>{getSegmentLabel(segment)}</Link>\n                        </BreadcrumbLink>\n                      )}\n                    </BreadcrumbItem>\n                  </Fragment>\n                )\n              })}\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </div>\n    </header>\n  )\n}\n"}]}