Componente de navegación de ruta de navegación
Un componente de navegación de ruta de navegación receptivo que usa Tailwind CSS con un estilo de diseño de glassmorphism. Cuenta con un fondo borroso similar al vidrio, admite temas oscuros e incluye imágenes de marcador de posición.
Código HTML
<div class="bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg p-4 mb-6">
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">
<img src="https://picsum.photos/20/20?random=1" alt="Home" class="w-5 h-5 rounded-full mr-2">
Home
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
</svg>
<a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Category</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
</svg>
<a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Subcategory</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
</svg>
<span class="ml-1 text-sm font-medium text-gray-700 dark:text-gray-200">Current Page</span>
</div>
</li>
</ol>
</nav>
</div>Componentes relacionados
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
Componente de navegación de migas de pan con diseño de skeuomorfismo, combinación de colores monocromática y complejidad simple para fines de tablero, con tema oscuro
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