Composants Navigation par fil d’Ariane Composant de navigation du fil d’Ariane

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.

Aperçu

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.

Ouvrir

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.

Ouvrir

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.

Ouvrir