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
HTML Code
<nav aria-label="Breadcrumb" class="flex">
<ol role="list" class="flex items-center space-x-4">
<li>
<div>
<a href="#" class="text-gray-400 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-500">
<svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-1-1l7-7z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Home</span>
</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38a.75.75 0 00-1.06 0L5.22 13.16a.75.75 0 000 1.06z" />
</svg>
<a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-400">Projects</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38a.75.75 0 00-1.06 0L5.22 13.16a.75.75 0 000 1.06z" />
</svg>
<a href="#" aria-current="page" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-400">Project Nero</a>
</div>
</li>
</ol>
</nav>Composants associés
Composant de navigation du fil d’Ariane
Composant de navigation Breadcrumb avec conception Skeuomorphism, effets réactifs et prise en charge du thème sombre.
Composant de navigation du fil d’Ariane
Un composant de navigation réactif conçu dans le style Neumorphism, prenant en charge le mode sombre, créé à l’aide de Tailwind CSS.
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.