Retro_Vintage_Corporate_Blue_Breadcrumb_Navigation
Un composant de navigation simple et réactif avec une esthétique rétro/vintage, utilisant des tons bleus d’entreprise, conçu pour les plateformes éducatives. Inclut la 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-2 rtl:space-x-reverse font-sans">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm font-medium text-blue-700 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200 uppercase tracking-widest">
<svg class="w-3 h-3 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-blue-600 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-blue-700 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200 uppercase tracking-widest">Courses</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="rtl:rotate-180 w-3 h-3 text-blue-600 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-blue-500 dark:text-blue-500 uppercase tracking-widest">Lesson 1</span>
</div>
</li>
</ol>
</nav>Composants associés
Composant de navigation du fil d’Ariane Neumorphism
Composant de navigation Neumorphism Breadcrumb pour blog/contenu avec prise en charge du mode sombre
Composant de navigation du fil d’Ariane
Un composant de navigation Breadcrumb inspiré du Material Design pour les tableaux de bord, utilisant un schéma de couleurs en niveaux de gris et des interactions complexes, implémenté avec Tailwind CSS pour la réactivité et la prise en charge des thèmes sombres.
Composant de navigation du fil d’Ariane
Un composant de navigation Breadcrumb réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, avec prise en charge du thème sombre.