Composant de navigation du fil d’Ariane Neumorphism
Composant de navigation Neumorphism Breadcrumb pour blog/contenu avec prise en charge du mode 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-400">
<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 011-1h2a1 1 0 011 1v3h1V9.414l-7-7a1 1 0 010-1.414z" 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.38l3.72-3.78a.75.75 0 00-1.06-1.06L10 8.38 6.28 4.6a.75.75 0 00-1.06 1.06L8.94 9.38l-3.72 3.78a.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-300">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.38l3.72-3.78a.75.75 0 00-1.06-1.06L10 8.38 6.28 4.6a.75.75 0 00-1.06 1.06L8.94 9.38l-3.72 3.78a.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-300" aria-current="page">Project Nero</a>
</div>
</li>
</ol>
</nav>Composants associés
Composant de navigation ludique
Un composant de navigation ludique et attrayant conçu pour les plateformes éducatives, avec des couleurs vives, des éléments arrondis et un contraste élevé pour une lisibilité facile. Il prend en charge le mode sombre et est entièrement réactif.
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.
Bauhaus_Music_Breadcrumb
Un simple composant de navigation inspiré du Bauhaus pour les plates-formes musicales/audio, avec des tons bleus d’entreprise et une réactivité totale avec la prise en charge du mode sombre.