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.
Código HTML
<nav class="flex justify-center py-4 px-2 sm:px-4 text-sm md:text-base bg-gradient-to-b from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-800" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-2 sm:space-x-4">
<li class="inline-flex items-center">
<a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
<svg class="w-4 h-4 mr-1 sm:mr-2 text-orange-700 dark:text-orange-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
</svg>
Home
</a>
</li>
<li aria-current="page">
<div class="flex items-center">
<span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
<a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
Properties
</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
<a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
Houses
</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
<span class="text-stone-600 dark:text-stone-400 font-light font-serif tracking-wide pr-1 sm:pr-0">
123 Vintage Lane
</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.
Componente de navegación de ruta de navegación
Un componente de navegación de migas de pan receptivo diseñado con estilo Neumorphism usando Tailwind CSS, con soporte para tema oscuro.
E-commerce Breadcrumb Navigation - Papel/Impresión Inspirado en el Púrpura
Un componente de navegación de migas de pan simple y receptivo diseñado para el comercio electrónico, con una estética inspirada en el papel/impresión con un esquema de color púrpura/violeta. Incluye soporte para modo oscuro.