Composant de navigation du fil d’Ariane
Un composant de navigation responsive breadcrumb conçu avec un style plat minimaliste, adapté aux blogs et à la consommation de contenu. Il comprend des éléments interactifs pour une navigation facile et prend en charge le mode sombre.
HTML Code
<nav class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<ol class="list-none flex space-x-4">
<li class="text-gray-700 dark:text-gray-300">
<a href="/" class="hover:text-blue-600 dark:hover:text-blue-300">Home</a>
</li>
<li class="text-gray-700 dark:text-gray-300">
<span>/</span>
</li>
<li class="text-gray-700 dark:text-gray-300">
<a href="/category" class="hover:text-blue-600 dark:hover:text-blue-300">Category</a>
</li>
<li class="text-gray-700 dark:text-gray-300">
<span>/</span>
</li>
<li class="text-gray-700 dark:text-gray-300">
<a href="/category/post" class="hover:text-blue-600 dark:hover:text-blue-300">Post Title</a>
</li>
</ol>
</nav>
<div class="mt-4 space-y-2">
<div class="flex items-center space-x-2">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
<span class="text-gray-800 dark:text-gray-200">Author Name</span>
</div>
<p class="text-gray-600 dark:text-gray-400">
This is a brief description meant for content consumption. It should be concise and engaging.
</p>
</div>
<div class="flex items-center mt-4">
<img class="h-32 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Blog Post Image">
</div>Composants associés
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 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
Composant de navigation Breadcrumb avec design rétro/vintage, palette de couleurs vives et niveau de complexité simple, à des fins de blog/contenu.