{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "store-navigations",
  "type": "registry:component",
  "title": "Store Navigations",
  "author": "Toby Belhome",
  "description": "Create intuitive and responsive navigation for online stores with Tailwind CSS store navigation sections. These layouts feature menus, categories, and search options to help shoppers browse efficiently. Perfect for e-commerce platforms and marketplaces seeking modern, user-friendly, and organized site navigation.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "sheet",
    "separator",
    "badge"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/store-navigations/01/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/store-navigations/icons.tsx"
    },
    {
      "path": "examples/blocks/ecommerce/store-navigations/01/page.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  const [open, setOpen] = React.useState(false);\n\n  return (\n    <>\n      <header>\n        <div className=\"flex grid-cols-3 items-center justify-between p-4\">\n          {/* left content and log */}\n          <Link href=\"/\" className=\"flex items-center gap-2\">\n            <img className=\"size-6\" src=\"/logo.svg\" alt=\"bundui svg logo\" />\n            <span className=\"text-base font-medium\">Bundui</span>\n          </Link>\n\n          {/* main navigation */}\n          <NavigationMenu className=\"hidden lg:block\">\n            <NavigationMenuList>\n              <NavigationMenuItem>\n                <NavigationMenuTrigger>Collections</NavigationMenuTrigger>\n                <NavigationMenuContent>\n                  <ul className=\"grid gap-0 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                    <li className=\"row-span-3\">\n                      <NavigationMenuLink asChild>\n                        <Link\n                          href=\"#\"\n                          className=\"block space-y-2\"\n                          onClick={(e) => e.preventDefault()}>\n                          <img\n                            src=\"/images/products/list1.png\"\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\">\n                              Timeless Classics\n                            </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                    {collectionItems.map((item, i) => (\n                      <Link\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                  </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>\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\">\n                            {item.title}\n                          </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          {/* right content */}\n          <div className=\"flex items-center gap-1\">\n            <Button variant=\"ghost\">\n              <SearchIcon />\n            </Button>\n            <Button variant=\"ghost\">\n              <HeartIcon />\n            </Button>\n            <Button variant=\"ghost\" size=\"icon\" className=\"relative\" aria-label=\"Cart\">\n              <ShoppingBag aria-hidden=\"true\" />\n              <Badge className=\"absolute -top-1 left-full size-4 -translate-x-1/2 rounded-full p-0 text-[10px]\">\n                4\n              </Badge>\n            </Button>\n            <div className=\"ms-3 flex items-center gap-1\">\n              <Button variant=\"secondary\">Sign in</Button>\n              <Button variant=\"ghost\" onClick={() => setOpen(true)} className=\"lg:hidden\">\n                <MenuIcon />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </header>\n\n      {/* for mobile navigation */}\n      <Sheet open={open} onOpenChange={setOpen}>\n        <SheetContent className=\"space-y-4 overflow-auto p-4\">\n          <div className=\"space-y-2\">\n            <div className=\"font-medium\">Collections</div>\n            <ul className=\"space-y-4\">\n              <li>\n                <Link\n                  href=\"#\"\n                  className=\"block space-y-2 rounded-md border p-3\"\n                  onClick={(e) => e.preventDefault()}>\n                  <img\n                    src=\"/images/products/list1.png\"\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              </li>\n              {collectionItems.map((item, i) => (\n                <li key={i}>\n                  <Link\n                    href={`${item.href}`}\n                    className=\"block gap-2 space-y-1 leading-none no-underline outline-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                </li>\n              ))}\n            </ul>\n          </div>\n\n          <Separator />\n\n          <div className=\"space-y-2\">\n            <div className=\"font-medium\">Accessories</div>\n            <ul className=\"grid list-none grid-cols-2 gap-2\">\n              {accessoriesMenuItems.map((item, i) => (\n                <Link\n                  key={i}\n                  href={`${item.href}`}\n                  className=\"bg-muted/50 flex flex-col justify-center gap-2 space-y-1 rounded-md p-3 text-center leading-none no-underline transition-colors\"\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              ))}\n            </ul>\n          </div>\n\n          <div className=\"space-y-2\">\n            <Link\n              href=\"#\"\n              className=\"bg-muted/50 flex flex-col justify-center gap-2 space-y-1 rounded-md p-3 text-center leading-none no-underline transition-colors\">\n              Men\n            </Link>\n\n            <Link\n              href=\"#\"\n              className=\"bg-muted/50 flex flex-col justify-center gap-2 space-y-1 rounded-md p-3 text-center leading-none no-underline transition-colors\">\n              Women\n            </Link>\n          </div>\n        </SheetContent>\n      </Sheet>\n\n      {/* fake content */}\n      <main className=\"bg-muted/50 min-h-[500px]\"></main>\n    </>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/store-navigations/store-navigations.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}