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
Navegación de migas de pan brutalistas
Un componente de navegación de migas de pan inspirado en el brutalismo para sistemas de reservas/reservas, con alto contraste, blanco y negro con un color de acento brillante y capacidad de respuesta total con soporte para modo oscuro. Cada paso está claramente delineado con una tipografía en negrita y un separador único.
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo diseñado con estilo Neumorphism usando Tailwind CSS, con soporte para tema oscuro.
Componente de navegación de migas de pan brutalistas
Componente de navegación de migas de pan brutalista para carteras con combinación de colores vibrantes y diseño complejo, con diseño receptivo y compatibilidad con modo oscuro.