Composants Navigation par fil d’Ariane Memphis_Rainbow_Breadcrumb_Navigation

Memphis_Rainbow_Breadcrumb_Navigation

Un composant de navigation simple et réactif avec une esthétique audacieuse de Memphis Design avec un dégradé arc-en-ciel multicolore, adapté aux sites de blogs/de contenu. Inclut la prise en charge du mode sombre.

Aperçu

HTML Code

<nav class="flex justify-center py-4 px-2 sm:px-4 md:px-6 lg:px-8 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-900 dark:to-black" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2 sm:space-x-4">
    <li>
      <div class="flex items-center">
        <a href="#" class="text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group">
          <svg class="flex-shrink-0 h-4 w-4 sm:h-5 sm:w-5 text-white group-hover:text-yellow-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-9a1 1 0 00-1-1H9a1 1 0 00-1 1v9h3m-3 1h6" />
          </svg>
          <span class="sr-only">Home</span>
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 transform rotate-45" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path d="M5.293 15.707a1 1 0 010-1.414L9.586 10 5.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <a href="#" class="ml-2 sm:ml-4 text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group">
          Blog
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 transform rotate-45" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path d="M5.293 15.707a1 1 0 010-1.414L9.586 10 5.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <a href="#" class="ml-2 sm:ml-4 text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group" aria-current="page">
          Latest Articles
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
        </a>
      </div>
    </li>
  </ol>
</nav>

Composants associés

Composant de navigation du fil d’Ariane

Un composant de navigation CSS Tailwind avec prise en charge du mode sombre.

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

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