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.
HTML Code
<div class="bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg p-4 mb-6">
<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-blue-600 dark:text-gray-200 dark:hover:text-blue-400">
<img src="https://picsum.photos/20/20?random=1" alt="Home" class="w-5 h-5 rounded-full mr-2">
Home
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
</svg>
<a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Category</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
</svg>
<a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Subcategory</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
</svg>
<span class="ml-1 text-sm font-medium text-gray-700 dark:text-gray-200">Current Page</span>
</div>
</li>
</ol>
</nav>
</div>Composants associés
Composante de navigation brutaliste
Composant de navigation brutaliste pour les portefeuilles avec une palette de couleurs vives et une mise en page complexe, avec un design réactif et une prise en charge du mode sombre.
Composant de navigation du fil d’Ariane
Un composant de navigation de fil d’Ariane réactif conçu avec le style Glassmorphism et les couleurs de ton Terre, parfait pour les sites Web d’entreprise professionnels. Il prend en charge le thème sombre et comprend des fonctionnalités interactives pour la navigation.
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.