Componentes Navegación de migas de pan Monospace_Developer_Breadcrumb_Navigation

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.

Vista previa

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 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.

Abrir

RetroRealEstateBreadcrumb

Un componente de navegación de migas de pan simple y receptivo en un estilo retro / vintage con colores otoñales, adecuado para listados de propiedades inmobiliarias, incluido el soporte de modo oscuro.

Abrir

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.

Abrir