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
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.
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 responsivo con diseño de materiales y CSS de viento de cola, con soporte para temas oscuros y un esquema de color triádico.