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.
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-gray-900 dark:bg-gray-800 p-3 rounded-lg shadow-lg">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm font-medium text-gray-400 hover:text-white dark:text-gray-500 dark:hover:text-white transition-colors duration-200">
<svg class="w-4 h-4 me-2.5" 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>
<div class="flex items-center">
<svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" 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-gray-400 hover:text-white dark:text-gray-500 dark:hover:text-white md:ms-2 transition-colors duration-200">Projects</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" 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-medium text-gray-200 dark:text-gray-400 md:ms-2">Web Development</span>
</div>
</li>
<li aria-current="page" class="hidden sm:inline-flex">
<div class="flex items-center">
<svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" 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-medium text-gray-200 dark:text-gray-400 md:ms-2">E-commerce Platform</span>
</div>
</li>
</ol>
</nav>Composants associés
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
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.
Composant de navigation du fil d’Ariane
Un composant de navigation Breadcrumb réactif utilisant le style de conception Neumorphism avec une palette de couleurs pastel et la prise en charge du thème sombre, construit à l’aide de Tailwind CSS.