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.
Código HTML
<nav class="bg-opacity-50 backdrop-blur-lg bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg">
<ol class="list-reset flex items-center space-x-4 text-gray-600 dark:text-gray-300">
<li>
<a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Home</a>
</li>
<li>
<span class="text-gray-400 dark:text-gray-500">/</span>
</li>
<li>
<a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Services</a>
</li>
<li>
<span class="text-gray-400 dark:text-gray-500">/</span>
</li>
<li>
<a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Consulting</a>
</li>
</ol>
</nav>
<!-- Example of how to display user avatars or images in a Breadcrumb if needed -->
<div class="flex items-center space-x-3 mt-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
<span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>Componentes relacionados
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.
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo que utiliza el estilo de diseño Neumorphism con un esquema de color pastel y soporte para temas oscuros, creado con Tailwind CSS.
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.