Composant de navigation du fil d’Ariane
Un composant de navigation CSS Tailwind avec prise en charge du mode sombre.
HTML Code
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" 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="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" 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="ml-1 text-sm font-medium text-gray-400 md:ml-2 dark:text-gray-500">Flowbite</span>
</div>
</li>
</ol>
</nav>Composants associés
E-commerce Breadcrumb Navigation - Imprimé Inspiré Violet
Un composant de navigation simple et réactif conçu pour le commerce électronique, avec une esthétique inspirée du papier/de l’impression avec une palette de couleurs violet/violet. Inclut la prise en charge du mode sombre.
Monospace_Developer_Breadcrumb_Navigation
Un composant de navigation réactif avec une esthétique monospace/développeur et une palette de couleurs rétro/vintage, conçu pour la documentation et les sites wiki. Inclut la prise en charge du mode sombre.
Composant de navigation du fil d’Ariane
Un composant de navigation réactif utilisant Tailwind CSS avec un style de conception glassmorphism. Dispose d’un arrière-plan flou semblable à du verre, prend en charge le thème sombre et inclut des images de remplacement.