lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
87 lines (81 loc) • 4.08 kB
JSX
import React from "react";
const AdvancedBreadcrumbs = () => {
return (
<nav className="p-4 ">
<ol className="flex items-center space-x-2 text-gray-600">
<li className="group flex items-center">
<a
href="/"
className="relative text-sm p-2 font-medium text-gray-500 hover:text-indigo-600 transition-all duration-300"
>
<span
className="absolute inset-0 scale-0 bg-indigo-100 p-2 rounded-full group-hover:scale-100 group-hover:opacity-100 transition-transform duration-300 ease-in-out"
></span>
<span className="relative z-10 flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
/>
</svg>
Home
</span>
</a>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-5 h-5 text-gray-400 group-hover:text-indigo-600 transition-colors duration-300"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8.25 15l7.5-7.5M8.25 7.5l7.5 7.5"
/>
</svg>
</li>
<li className="group flex items-center">
<a
href="/products"
className="relative text-sm p-2 font-medium text-gray-500 hover:text-indigo-600 transition-all duration-300"
>
<span
className="absolute inset-0 p-2 scale-0 bg-indigo-100 rounded-full group-hover:scale-100 group-hover:opacity-100 transition-transform duration-300 ease-in-out"
></span>
<span className="relative z-10">Products</span>
</a>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-5 h-5 text-gray-400 group-hover:text-indigo-600 transition-colors duration-300"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M8.25 15l7.5-7.5M8.25 7.5l7.5 7.5"
/>
</svg>
</li>
<li className="relative">
<span className="text-sm font-semibold text-indigo-600">
Product Details
</span>
</li>
</ol>
</nav>
);
};
export default AdvancedBreadcrumbs;