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
Earth_Tones_Gradient_Breadcrumb_Navigation
Un componente de navegación de migas de pan complejo y receptivo diseñado para sitios web de noticias/periodismo, con transiciones de degradado terroso y soporte completo para el modo oscuro.
Componente de navegación de ruta de navegación
Un componente de navegación de ruta de navegación receptivo que usa Tailwind CSS con un estilo de diseño de glassmorphism. Cuenta con un fondo borroso similar al vidrio, admite temas oscuros e incluye imágenes de marcador de posición.
Componente de navegación de ruta de navegación
Componente de navegación de migas de pan con diseño retro / vintage, combinación de colores vibrantes y nivel de complejidad simple, para fines de blog / contenido.