{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu-06",
  "title": "Rich Navigation Menu",
  "description": "A feature-rich navigation menu with advanced styling",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "navigation-menu"
  ],
  "files": [
    {
      "path": "src/components/customized/navigation-menu/navigation-menu-06.tsx",
      "content": "import {\n  CreditCardIcon,\n  Loader,\n  type LucideIcon,\n  SquareCheckIcon,\n  SquareChevronUpIcon,\n  SquarePowerIcon,\n  ToggleRight,\n} from \"lucide-react\";\nimport Link from \"next/link\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/ui/navigation-menu\";\n\nconst components: {\n  title: string;\n  href: string;\n  description: string;\n  icon: LucideIcon;\n}[] = [\n  {\n    title: \"Accordion\",\n    href: \"/components/accordion\",\n    description:\n      \"A vertically stacked set of interactive headings that each reveal a section of content.\",\n    icon: SquareChevronUpIcon,\n  },\n  {\n    title: \"Button\",\n    href: \"/components/button\",\n    description: \"Displays a button or a component that looks like a button.\",\n    icon: SquarePowerIcon,\n  },\n  {\n    title: \"Card\",\n    href: \"/components/card\",\n    description: \"Displays a card with header, content, and footer.\",\n    icon: CreditCardIcon,\n  },\n  {\n    title: \"Checkbox\",\n    href: \"/components/checkbox\",\n    description:\n      \"A control that allows the user to toggle between checked and not checked.\",\n    icon: SquareCheckIcon,\n  },\n  {\n    title: \"Spinner\",\n    href: \"/components/spinner\",\n    description: \"Informs users about the status of ongoing processes.\",\n    icon: Loader,\n  },\n  {\n    title: \"Switch\",\n    href: \"/components/switch\",\n    description:\n      \"A control that allows the user to toggle between checked and not checked.\",\n    icon: ToggleRight,\n  },\n];\n\nexport default function RichNavigationMenu() {\n  return (\n    <NavigationMenu className=\"z-20\">\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n          <NavigationMenuContent className=\"px-0 py-1\">\n            <div className=\"grid w-[900px] grid-cols-3 gap-3 divide-x p-4\">\n              <div className=\"col-span-2 pe-2\">\n                <h6 className=\"pl-2.5 font-semibold text-muted-foreground text-sm uppercase\">\n                  Capabilities\n                </h6>\n                <ul className=\"mt-2.5 grid grid-cols-2 gap-3\">\n                  {components.map((component) => (\n                    <ListItem\n                      href={component.href}\n                      icon={component.icon}\n                      key={component.title}\n                      title={component.title}\n                    >\n                      {component.description}\n                    </ListItem>\n                  ))}\n                </ul>\n              </div>\n\n              <div className=\"pl-4\">\n                <h6 className=\"pl-2.5 font-semibold text-muted-foreground text-sm uppercase\">\n                  Product & Features\n                </h6>\n                <ul className=\"mt-2.5 grid gap-3\">\n                  {components.slice(0, 3).map((component) => (\n                    <ListItem\n                      href={component.href}\n                      icon={component.icon}\n                      key={component.title}\n                      title={component.title}\n                    >\n                      {component.description}\n                    </ListItem>\n                  ))}\n                </ul>\n              </div>\n            </div>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>\n          <NavigationMenuContent className=\"p-4\">\n            <h6 className=\"pl-2.5 font-semibold text-muted-foreground text-sm uppercase\">\n              Solutions\n            </h6>\n            <ul className=\"mt-2.5 grid w-[400px] gap-3 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n              {components.map((component) => (\n                <ListItem\n                  href={component.href}\n                  icon={component.icon}\n                  key={component.title}\n                  title={component.title}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <Link href=\"/docs\" legacyBehavior passHref>\n            <NavigationMenuLink className={navigationMenuTriggerStyle()}>\n              Developers\n            </NavigationMenuLink>\n          </Link>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  );\n}\n\nconst ListItem = React.forwardRef<\n  React.ElementRef<\"a\">,\n  React.ComponentPropsWithoutRef<\"a\"> & { icon: LucideIcon }\n>(({ className, title, children, icon: Icon, ...props }, ref) => {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <a\n          className={cn(\n            \"block select-none flex-col items-start rounded-md p-3 leading-none no-underline outline-hidden transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\",\n            className\n          )}\n          ref={ref}\n          {...props}\n        >\n          <div className=\"flex items-center gap-2 font-semibold leading-none tracking-tight\">\n            <Icon className=\"h-5 w-5\" />\n            {title}\n          </div>\n          <p className=\"mt-2 line-clamp-2 text-muted-foreground text-sm leading-snug\">\n            {children}\n          </p>\n        </a>\n      </NavigationMenuLink>\n    </li>\n  );\n});\nListItem.displayName = \"ListItem\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}