Store Navigations

Store Navigations is a React and Tailwind CSS navigation component from Bund UI, licensed MIT. Copy it and paste it into your project.

Bund UI MIT navigation

What it is

Store Navigations is a React and Tailwind CSS navigation component from Bund UI, licensed MIT. Copy it and paste it into your project.

How to use it

Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.

Open in the catalogue

Five free copies a month. No card.

Needs

npm i lucide-react

Licence

This component comes from Bund UI and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.

Store Navigations

examples/blocks/ecommerce/store-navigations/01/icons.tsx

import * as React from "react";

export const BagIcon = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1"
      stroke-linecap="round"
      stroke-linejoin="round"
      {...props}>
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <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" />
      <path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" />
      <path d="M12 12l0 .01" />
      <path d="M3 13a20 20 0 0 0 18 0" />
    </svg>
  );
};

export const JewelryIcon = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1"
      stroke-linecap="round"
      stroke-linejoin="round"
      {...props}>
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <path d="M6 5h12l3 5l-8.5 9.5a.7 .7 0 0 1 -1 0l-8.5 -9.5l3 -5" />
      <path d="M10 12l-2 -2.2l.6 -1" />
    </svg>
  );
};

export const SunglassesIcon = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1"
      stroke-linecap="round"
      stroke-linejoin="round"
      {...props}>
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <path d="M8 3h-2l-3 9" />
      <path d="M16 3h2l3 9" />
      <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" />
      <path d="M7 16h1" />
      <path d="M16 16h1" />
    </svg>
  );
};

export const HatIcon = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1"
      stroke-linecap="round"
      stroke-linejoin="round"
      {...props}>
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <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" />
      <path d="M6 10.5c0 .969 4.39 3.5 9.5 3.5c1.314 0 3 .063 3 -1.5" />
    </svg>
  );
};

export const BeltIcon = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1"
      stroke-linecap="round"
      stroke-linejoin="round"
      {...props}>
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <path d="M7 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
      <path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
      <path d="M9.15 14.85l8.85 -10.85" />
      <path d="M6 4l8.85 10.85" />
    </svg>
  );
};

export const OtherIcon = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1"
      stroke-linecap="round"
      stroke-linejoin="round"
      {...props}>
      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
      <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" />
      <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" />
    </svg>
  );
};

examples/blocks/ecommerce/store-navigations/01/page.tsx

"use client";

import * as React from "react";
import Link from "next/link";
import { HeartIcon, MenuIcon, SearchIcon, ShoppingBag } from "lucide-react";

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle
} from "@/components/ui/navigation-menu";
import { Button } from "@/components/ui/button";
import { Sheet, SheetContent } from "@/components/ui/sheet";
import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import { BagIcon, BeltIcon, HatIcon, JewelryIcon, OtherIcon, SunglassesIcon } from "./icons";

type ListItemType = {
  title: string;
  href?: string;
  description?: string;
  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
};

const accessoriesMenuItems: ListItemType[] = [
  {
    title: "Bags",
    href: "#",
    icon: BagIcon
  },
  {
    title: "Jewelry",
    href: "#",
    icon: JewelryIcon
  },
  {
    title: "Sunglasses",
    href: "#",
    icon: SunglassesIcon
  },
  {
    title: "Hats & Beanies",
    href: "#",
    icon: HatIcon
  },
  {
    title: "Belts",
    href: "#",
    icon: BeltIcon
  },
  {
    title: "All  Accessories",
    href: "#",
    icon: OtherIcon
  }
];

const collectionItems = [
  {
    title: "Trends",
    href: "#",
    description: "Discover this summer's trendy products."
  },
  {
    title: "Best Sellers",
    href: "#",
    description: "We've collected the best-selling products for you."
  },
  {
    title: "New Arrivals",
    href: "#",
    description: "Discover the most favorited products."
  }
];

export default function NavigationMenuDemo() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <header>
        <div className="flex grid-cols-3 items-center justify-between p-4">
          {/* left content and log */}
          <Link href="/" className="flex items-center gap-2">
            <img className="size-6" src="/logo.svg" alt="bundui svg logo" />
            <span className="text-base font-medium">Bundui</span>
          </Link>

          {/* main navigation */}
          <NavigationMenu className="hidden lg:block">
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger>Collections</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="grid gap-0 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
                    <li className="row-span-3">
                      <NavigationMenuLink asChild>
                        <Link
                          href="#"
                          className="block space-y-2"
                          onClick={(e) => e.preventDefault()}>
                          <img
                            src="/images/products/list1.png"
                            alt="..."
                            className="aspect-4/3 w-96 rounded object-cover"
                          />
                          <div className="space-y-1">
                            <div className="text-sm leading-none font-medium">
                              Timeless Classics
                            </div>
                            <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
                              Elevate your style with essentials
                            </p>
                          </div>
                        </Link>
                      </NavigationMenuLink>
                    </li>
                    {collectionItems.map((item, i) => (
                      <Link
                        href={`${item.href}`}
                        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"
                        onClick={(e) => e.preventDefault()}>
                        <div className="text-sm leading-none font-medium">{item.title}</div>
                        <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
                          {item.description}
                        </p>
                      </Link>
                    ))}
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuTrigger>Accessories</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="grid w-[400px] list-none grid-cols-2 gap-3 lg:w-[300px]">
                    {accessoriesMenuItems.map((item, i) => (
                      <NavigationMenuLink asChild>
                        <Link
                          href={`${item.href}`}
                          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"
                          onClick={(e) => e.preventDefault()}>
                          {item.icon ? (
                            <item.icon className="text-muted-foreground mx-auto size-8" />
                          ) : null}
                          <span className="block text-sm leading-none font-medium">
                            {item.title}
                          </span>
                        </Link>
                      </NavigationMenuLink>
                    ))}
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuLink asChild>
                  <Link
                    href="#"
                    className={navigationMenuTriggerStyle()}
                    onClick={(e) => e.preventDefault()}>
                    Women
                  </Link>
                </NavigationMenuLink>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuLink asChild>
                  <Link
                    href="#"
                    className={navigationMenuTriggerStyle()}
                    onClick={(e) => e.preventDefault()}>
                    Men
                  </Link>
                </NavigationMenuLink>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>

          {/* right content */}
          <div className="flex items-center gap-1">
            <Button variant="ghost">
              <SearchIcon />
            </Button>
            <Button variant="ghost">
              <HeartIcon />
            </Button>
            <Button variant="ghost" size="icon" className="relative" aria-label="Cart">
              <ShoppingBag aria-hidden="true" />
              <Badge className="absolute -top-1 left-full size-4 -translate-x-1/2 rounded-full p-0 text-[10px]">
                4
              </Badge>
            </Button>
            <div className="ms-3 flex items-center gap-1">
              <Button variant="secondary">Sign in</Button>
              <Button variant="ghost" onClick={() => setOpen(true)} className="lg:hidden">
                <MenuIcon />
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* for mobile navigation */}
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetContent className="space-y-4 overflow-auto p-4">
          <div className="space-y-2">
            <div className="font-medium">Collections</div>
            <ul className="space-y-4">
              <li>
                <Link
                  href="#"
                  className="block space-y-2 rounded-md border p-3"
                  onClick={(e) => e.preventDefault()}>
                  <img
                    src="/images/products/list1.png"
                    alt="..."
                    className="aspect-4/3 w-96 rounded object-cover"
                  />
                  <div className="space-y-1">
                    <div className="text-sm leading-none font-medium">Timeless Classics</div>
                    <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
                      Elevate your style with essentials
                    </p>
                  </div>
                </Link>
              </li>
              {collectionItems.map((item, i) => (
                <li key={i}>
                  <Link
                    href={`${item.href}`}
                    className="block gap-2 space-y-1 leading-none no-underline outline-none"
                    onClick={(e) => e.preventDefault()}>
                    <div className="text-sm leading-none font-medium">{item.title}</div>
                    <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
                      {item.description}
                    </p>
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          <Separator />

          <div className="space-y-2">
            <div className="font-medium">Accessories</div>
            <ul className="grid list-none grid-cols-2 gap-2">
              {accessoriesMenuItems.map((item, i) => (
                <Link
                  key={i}
                  href={`${item.href}`}
                  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"
                  onClick={(e) => e.preventDefault()}>
                  {item.icon ? (
                    <item.icon className="text-muted-foreground mx-auto size-8" />
                  ) : null}
                  <span className="block text-sm leading-none font-medium">{item.title}</span>
                </Link>
              ))}
            </ul>
          </div>

          <div className="space-y-2">
            <Link
              href="#"
              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">
              Men
            </Link>

            <Link
              href="#"
              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">
              Women
            </Link>
          </div>
        </SheetContent>
      </Sheet>

      {/* fake content */}
      <main className="bg-muted/50 min-h-[500px]"></main>
    </>
  );
}

Similar components