Bauhaus_Music_Breadcrumb
Un sencillo componente de navegación de migas de pan inspirado en la Bauhaus para plataformas de música/audio, con tonos azules corporativos y capacidad de respuesta total con soporte para modo oscuro.
Código HTML
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
<li class="inline-flex items-center">
<a href="#"
class="inline-flex items-center text-sm font-medium text-blue-800 hover:text-blue-950 dark:text-blue-300 dark:hover:text-white px-2 py-1 rounded-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-blue-300 dark:hover:border-blue-700"
aria-current="page">
<svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path
d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
</svg>
Home
</a>
</li>
<li>
<div class="flex items-center">
<svg class="rtl:rotate-180 w-3 h-3 text-blue-600 mx-1 dark:text-blue-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
</svg>
<a href="#"
class="ms-1 text-sm font-medium text-blue-800 hover:text-blue-950 dark:text-blue-300 dark:hover:text-white px-2 py-1 rounded-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-blue-300 dark:hover:border-blue-700 md:ms-2">Artists</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="rtl:rotate-180 w-3 h-3 text-blue-600 mx-1 dark:text-blue-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
</svg>
<span class="ms-1 text-sm font-semibold text-blue-900 dark:text-white px-2 py-1 rounded-sm md:ms-2">The Electroniks</span>
</div>
</li>
</ol>
</nav>Componentes relacionados
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 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 ruta de navegación
Un componente de navegación de migas de pan receptivo diseñado en un estilo brutalista con una combinación de colores vibrantes para los tableros, con soporte para modo oscuro.