Neon_Glow_Gaming_Breadcrumb
Un componente de navegación de migas de pan complejo y receptivo diseñado para sitios web de juegos, con efectos de neón/brillo con una base en blanco y negro y un color de acento vibrante. Incluye soporte para modo oscuro y HTML semántico.
Código HTML
<nav class="bg-black text-white py-4 px-6 sm:px-8 lg:px-12 dark:bg-gray-950" aria-label="Breadcrumb">
<ol class="flex flex-wrap items-center space-x-2 sm:space-x-4 text-sm sm:text-base font-semibold">
<li class="flex items-center group">
<a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
<svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 001 1h3M14 4v7h-6V4m6 0H9m7 0-.55-.55z"></path></svg>
Home
</a>
<svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</li>
<li class="flex items-center group">
<a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
<svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4h2a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2m4-2v4m0-4h.01M16 4h-4m-4 0H8m0 0v4m0-4h.01L14 10l-2 2h-4l-2 2h-4v4h16V6"></path></svg>
Games
</a>
<svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</li>
<li class="flex items-center group">
<a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
<svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-spin-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
Genre: Action
</a>
<svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</li>
<li class="flex items-center">
<span class="text-cyan-400 drop-shadow-[0_0_8px_rgba(0,255,255,0.7)] relative transition-all duration-300">
<svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 14.93L12 21.05l9.08-6.12A12.01 12.01 0 0021.08 6.982z"></path></svg>
Cyberpunk 2077
</span>
</li>
</ol>
</nav>
<style>
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-spin-slow {
animation: spin-slow 5s linear infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; text-shadow: 0 0 5px rgba(0,255,255,0.5); }
50% { opacity: 0.7; text-shadow: 0 0 15px rgba(0,255,255,1); }
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.group-hover\:animate-bounce:hover {
animation: bounce 0.6s infinite;
}
/* Dark mode specific glows */
.dark .group-hover\:drop-shadow-\[0_0_8px_rgba\(0\,255\,255\,0\.7\)\]:hover {
filter: drop-shadow(0 0 10px rgba(0,255,255,0.9));
}
.dark .text-cyan-400.drop-shadow-\[0_0_8px_rgba\(0\,255\,255\,0\.7\)\] {
filter: drop-shadow(0 0 10px rgba(0,255,255,0.9));
}
</style>Componentes relacionados
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan inspirado en Material Design para paneles, que utiliza un esquema de color en escala de grises e interacciones complejas, implementado con Tailwind CSS para brindar capacidad de respuesta y compatibilidad con temas oscuros.
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan CSS de Tailwind con soporte para modo oscuro.
Paper_Jewel_Tone_Breadcrumb_Navigation
Un complejo componente de navegación de migas de pan inspirado en papel / impresión con tonos joya, adecuado para sitios web de consultoría / servicios. Cuenta con elementos ricos e interactivos y admite una capacidad de respuesta completa y el modo oscuro.