{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu4",
  "title": "Navigation menu",
  "description": "A collection of links for navigating websites.",
  "files": [
    {
      "path": "contents/components/navigation-menu/4/icons.tsx",
      "content": "import * as React from \"react\";\n\nexport const BagIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      {...props}>\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M3 7m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z\" />\n      <path d=\"M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2\" />\n      <path d=\"M12 12l0 .01\" />\n      <path d=\"M3 13a20 20 0 0 0 18 0\" />\n    </svg>\n  );\n};\n\nexport const JewelryIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      {...props}>\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M6 5h12l3 5l-8.5 9.5a.7 .7 0 0 1 -1 0l-8.5 -9.5l3 -5\" />\n      <path d=\"M10 12l-2 -2.2l.6 -1\" />\n    </svg>\n  );\n};\n\nexport const SunglassesIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      {...props}>\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M8 3h-2l-3 9\" />\n      <path d=\"M16 3h2l3 9\" />\n      <path d=\"M3 12v7a1 1 0 0 0 1 1h4.586a1 1 0 0 0 .707 -.293l2 -2a1 1 0 0 1 1.414 0l2 2a1 1 0 0 0 .707 .293h4.586a1 1 0 0 0 1 -1v-7h-18z\" />\n      <path d=\"M7 16h1\" />\n      <path d=\"M16 16h1\" />\n    </svg>\n  );\n};\n\nexport const HatIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      {...props}>\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M6 10.5l1.436 -4c.318 -.876 .728 -1.302 1.359 -1.302c.219 0 1.054 .365 1.88 .583c.825 .219 .733 -.329 .908 -.487c.176 -.158 .355 -.294 .61 -.294c.242 0 .553 .048 1.692 .448c.759 .267 1.493 .574 2.204 .922c1.175 .582 1.426 .913 1.595 1.507l.816 4.623c2.086 .898 3.5 2.357 3.5 3.682c0 1.685 -1.2 3.818 -5.957 3.818c-6.206 0 -14.043 -4.042 -14.043 -7.32c0 -1.044 1.333 -1.77 4 -2.18z\" />\n      <path d=\"M6 10.5c0 .969 4.39 3.5 9.5 3.5c1.314 0 3 .063 3 -1.5\" />\n    </svg>\n  );\n};\n\nexport const BeltIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      {...props}>\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M7 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" />\n      <path d=\"M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0\" />\n      <path d=\"M9.15 14.85l8.85 -10.85\" />\n      <path d=\"M6 4l8.85 10.85\" />\n    </svg>\n  );\n};\n\nexport const OtherIcon = (props: React.SVGProps<SVGSVGElement>) => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      {...props}>\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path d=\"M6 4a4 4 0 0 1 4 3.8l0 .2v10.5a1.5 1.5 0 0 1 -3 0v-6.5h-1a4 4 0 0 1 -4 -3.8l0 -.2a4 4 0 0 1 4 -4z\" />\n      <path d=\"M18 4a4 4 0 0 0 -4 3.8l0 .2v10.5a1.5 1.5 0 0 0 3 0v-6.5h1a4 4 0 0 0 4 -3.8l0 -.2a4 4 0 0 0 -4 -4z\" />\n    </svg>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/navigation-menu4/icons.tsx"
    },
    {
      "path": "contents/components/navigation-menu/4/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport Link from \"next/link\";\nimport { HeartIcon, MenuIcon, SearchIcon, ShoppingBag } from \"lucide-react\";\n\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle\n} from \"@/components/ui/navigation-menu\";\nimport { Button } from \"@/components/ui/button\";\nimport { Sheet, SheetContent } from \"@/components/ui/sheet\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { BagIcon, BeltIcon, HatIcon, JewelryIcon, OtherIcon, SunglassesIcon } from \"./icons\";\n\ntype ListItemType = {\n  title: string;\n  href?: string;\n  description?: string;\n  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;\n};\n\nconst accessoriesMenuItems: ListItemType[] = [\n  {\n    title: \"Bags\",\n    href: \"#\",\n    icon: BagIcon\n  },\n  {\n    title: \"Jewelry\",\n    href: \"#\",\n    icon: JewelryIcon\n  },\n  {\n    title: \"Sunglasses\",\n    href: \"#\",\n    icon: SunglassesIcon\n  },\n  {\n    title: \"Hats & Beanies\",\n    href: \"#\",\n    icon: HatIcon\n  },\n  {\n    title: \"Belts\",\n    href: \"#\",\n    icon: BeltIcon\n  },\n  {\n    title: \"All  Accessories\",\n    href: \"#\",\n    icon: OtherIcon\n  }\n];\n\nconst collectionItems = [\n  {\n    title: \"Trends\",\n    href: \"#\",\n    description: \"Discover this summer's trendy products.\"\n  },\n  {\n    title: \"Best Sellers\",\n    href: \"#\",\n    description: \"We've collected the best-selling products for you.\"\n  },\n  {\n    title: \"New Arrivals\",\n    href: \"#\",\n    description: \"Discover the most favorited products.\"\n  }\n];\n\nexport default function NavigationMenuDemo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Collections</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"lg:w-[600px grid gap-0 md:w-[400px] lg:grid-cols-2\">\n              {collectionItems.map((item, i) => (\n                <Link\n                  key={i}\n                  href={`${item.href}`}\n                  className=\"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground gap-2 space-y-1 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none\"\n                  onClick={(e) => e.preventDefault()}>\n                  <div className=\"text-sm leading-none font-medium\">{item.title}</div>\n                  <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n                    {item.description}\n                  </p>\n                </Link>\n              ))}\n              <li className=\"col-start-2 row-span-3 row-start-1\">\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"block space-y-2\" onClick={(e) => e.preventDefault()}>\n                    <img\n                      src=\"https://images.unsplash.com/photo-1512436991641-6745cdb1723f?auto=format&fit=crop&w=600&q=80\"\n                      alt=\"...\"\n                      className=\"aspect-4/3 w-96 rounded object-cover\"\n                    />\n                    <div className=\"space-y-1\">\n                      <div className=\"text-sm leading-none font-medium\">Timeless Classics</div>\n                      <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n                        Elevate your style with essentials\n                      </p>\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Accessories</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[400px] list-none grid-cols-2 gap-3 lg:w-[300px]\">\n              {accessoriesMenuItems.map((item, i) => (\n                <NavigationMenuLink asChild key={i}>\n                  <Link\n                    href={`${item.href}`}\n                    className=\"hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex justify-center gap-2 space-y-1 rounded-md p-3 text-center leading-none no-underline transition-colors outline-none select-none\"\n                    onClick={(e) => e.preventDefault()}>\n                    {item.icon ? (\n                      <item.icon className=\"text-muted-foreground mx-auto size-8\" />\n                    ) : null}\n                    <span className=\"block text-sm leading-none font-medium\">{item.title}</span>\n                  </Link>\n                </NavigationMenuLink>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink asChild>\n            <Link\n              href=\"#\"\n              className={navigationMenuTriggerStyle()}\n              onClick={(e) => e.preventDefault()}>\n              Women\n            </Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink asChild>\n            <Link\n              href=\"#\"\n              className={navigationMenuTriggerStyle()}\n              onClick={(e) => e.preventDefault()}>\n              Men\n            </Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/navigation-menu4/navigation-menu4.tsx"
    }
  ],
  "type": "registry:component"
}