Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo diseñado en el estilo Neumorphism, compatible con el modo oscuro, creado con Tailwind CSS.
Código HTML
<nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mx-4">
<ol class="list-reset flex items-center space-x-2">
<li>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
Home
</a>
<svg class="w-4 h-4 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7l7-7-7-7" /></svg>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
Category
</a>
<svg class="w-4 h-4 text-gray-400 dark:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7l7-7-7-7" /></svg>
</li>
<li>
<span class="text-gray-400 dark:text-gray-600">
Sub-category
</span>
</li>
</ol>
</nav>
<style>
/* Neumorphism Styling */
.bg-white {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
}
.dark .bg-gray-800 {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(0, 0, 0, 0.7);
}
a {
transition: all 0.3s ease;
}
</style>Componentes relacionados
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo diseñado con estilo Glassmorphism y colores de tono tierra, perfecto para sitios web de empresas profesionales. Es compatible con el tema oscuro e incluye funciones interactivas para la navegación.
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan responsivo diseñado con un estilo plano minimalista, adecuado para blogs y consumo de contenido. Incluye elementos interactivos para facilitar la navegación y es compatible con el modo 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.