Monospace_Developer_Breadcrumb_Navigation
Un componente de navegación de migas de pan receptivo con una estética monoespaciada / de desarrollador y un esquema de color retro / vintage, diseñado para sitios de documentación y wiki. Incluye soporte para modo oscuro.
Código HTML
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-2 md:space-x-4 font-mono text-xs md:text-sm lg:text-base p-2 rounded-md
bg-gray-100 dark:bg-gray-800
text-gray-700 dark:text-gray-300
border border-gray-300 dark:border-gray-700
shadow-sm dark:shadow-md">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center
text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
transition-colors duration-200
px-2 py-1 rounded-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<svg class="w-3 h-3 mr-1 md:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
</path>
</svg>
_HOME
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
</path>
</svg>
<a href="#" class="
text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
transition-colors duration-200
px-2 py-1 rounded-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
_DOCS
</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
</path>
</svg>
<a href="#" class="
text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
transition-colors duration-200
px-2 py-1 rounded-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
_GETTING_STARTED
</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
</path>
</svg>
<span class="
text-blue-600 dark:text-blue-400
font-bold
px-2 py-1
cursor-default">
_INSTALLATION
</span>
</div>
</li>
</ol>
</nav>Componentes relacionados
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.
Earth_Tones_Gradient_Breadcrumb_Navigation
Un componente de navegación de migas de pan complejo y receptivo diseñado para sitios web de noticias/periodismo, con transiciones de degradado terroso y soporte completo para el modo oscuro.
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.