Memphis_Rainbow_Breadcrumb_Navigation
Un componente de navegación de migas de pan simple y receptivo con una estética audaz de Memphis Design con un degradado de arco iris multicolor, adecuado para sitios de blogs/contenido. Incluye soporte para modo oscuro.
Código HTML
<nav class="flex justify-center py-4 px-2 sm:px-4 md:px-6 lg:px-8 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-900 dark:to-black" aria-label="Breadcrumb">
<ol class="flex items-center space-x-2 sm:space-x-4">
<li>
<div class="flex items-center">
<a href="#" class="text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group">
<svg class="flex-shrink-0 h-4 w-4 sm:h-5 sm:w-5 text-white group-hover:text-yellow-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-9a1 1 0 00-1-1H9a1 1 0 00-1 1v9h3m-3 1h6" />
</svg>
<span class="sr-only">Home</span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 transform rotate-45" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
<path d="M5.293 15.707a1 1 0 010-1.414L9.586 10 5.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<a href="#" class="ml-2 sm:ml-4 text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group">
Blog
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 transform rotate-45" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
<path d="M5.293 15.707a1 1 0 010-1.414L9.586 10 5.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<a href="#" class="ml-2 sm:ml-4 text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group" aria-current="page">
Latest Articles
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
</a>
</div>
</li>
</ol>
</nav>Componentes relacionados
RetroRealEstateBreadcrumb
Un componente de navegación de migas de pan simple y receptivo en un estilo retro / vintage con colores otoñales, adecuado para listados de propiedades inmobiliarias, incluido el soporte de modo oscuro.
Migas de pan deportivas neumórficas
Un componente de navegación de migas de pan complejo y neumórfico diseñado para aplicaciones deportivas / fitness, con ricos tonos joya y capacidad de respuesta total con soporte para modo oscuro.
Componente de navegación de ruta de navegación
Componente de navegación de migas de pan responsivo con diseño de materiales y CSS de viento de cola, con soporte para temas oscuros y un esquema de color triádico.