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.
Código HTML
<nav class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6 max-w-4xl mx-auto">
<ol class="list-reset flex text-gray-700 dark:text-gray-300">
<li>
<a href="#" class="text-blue-500 hover:text-blue-700">Home</a>
</li>
<li>
<span class="mx-2">/</span>
</li>
<li>
<a href="#" class="text-blue-500 hover:text-blue-700">Library</a>
</li>
<li>
<span class="mx-2">/</span>
</li>
<li>
<a href="#" class="text-blue-500 hover:text-blue-700">Data</a>
</li>
</ol>
</nav>
<style>
/* Neumorphism styles */
nav {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
-8px -8px 15px rgba(255, 255, 255, 0.7);
}
nav.dark {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5),
-8px -8px 15px rgba(0, 0, 0, 0.2);
}
</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 migas de pan de neumorfismo
Componente de navegación de migas de pan de neumorfismo para blog/contenido 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.