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.
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">
<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" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
<path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
</svg>
<a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Projects</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="h-5 w-5 flex-shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
<path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
</svg>
<a href="#" aria-current="page" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Project Nero</a>
</div>
</li>
</ol>
</nav>
Composants associés
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 réactif conçu dans un style brutaliste avec une palette de couleurs vives pour les tableaux de bord, avec prise en charge du mode 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.