Earth_Tones_Gradient_Breadcrumb_Navigation
Un composant de navigation complexe et réactif conçu pour les sites Web d’actualités et de journalisme, avec des transitions de dégradé terreux et une prise en charge complète du mode sombre.
HTML Code
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse bg-gradient-to-r from-stone-100 via-stone-50 to-amber-50 dark:from-stone-800 dark:via-stone-700 dark:to-amber-950 p-2 sm:p-3 rounded-lg shadow-lg dark:shadow-stone-950/50 transition-all duration-300 ease-in-out">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm font-medium text-stone-700 hover:text-stone-900 dark:text-stone-300 dark:hover:text-white transition-colors duration-200">
<svg class="w-4 h-4 me-2.5 text-amber-600 dark:text-amber-400 transition-colors duration-200" 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 class="group">
<div class="flex items-center">
<svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-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-stone-700 hover:text-stone-900 md:ms-2 dark:text-stone-300 dark:hover:text-white transition-colors duration-200 group-hover:text-amber-700 dark:group-hover:text-amber-500">
Categories
</a>
</div>
</li>
<li class="group">
<div class="flex items-center">
<svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-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-stone-700 hover:text-stone-900 md:ms-2 dark:text-stone-300 dark:hover:text-white transition-colors duration-200 group-hover:text-amber-700 dark:group-hover:text-amber-500">
Politics
</a>
</div>
</li>
<li aria-current="page" class="group">
<div class="flex items-center">
<svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-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-amber-800 md:ms-2 dark:text-amber-300 transition-colors duration-200 group-hover:text-amber-900 dark:group-hover:text-amber-200">
Current Affairs Article Title
</span>
</div>
</li>
</ol>
</nav>Composants associés
Composant de navigation du fil d’Ariane
Un composant de navigation complexe et monochromatique conçu pour les portefeuilles, doté d’une interface utilisateur en mode sombre et d’une réactivité totale.
Composant de navigation du fil d’Ariane
Un composant de navigation Breadcrumb réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, avec prise en charge du thème sombre.
Composant de navigation du fil d’Ariane
Composant de navigation Breadcrumb avec conception Skeuomorphism, schéma de couleurs monochromatique et complexité simple à des fins de tableau de bord, avec thème sombre