Rechercher des composants

Catégories

Composants Navigation par fil d’Ariane

Navigation par fil d’Ariane

Affiche le chemin d’accès de l’utilisateur au site Web

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.

Ouvrir Aperçu

                <nav class="flex justify-center px-4 py-3 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 shadow-xl rounded-b-3xl dark:from-gray-800 dark:via-gray-900 dark:to-black sm:px-6 md:px-8 lg:px-10 xl:px-12" aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center space-x-2 sm:space-x-4">
    <li>
      <a href="#" class="flex items-center text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
        <svg class="w-5 h-5 mr-1 sm:mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
        </svg>
        <span class="font-semibold text-sm sm:text-base">Home</span>
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <a href="#" class="ml-1 sm:ml-2 text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
          <span class="font-medium text-sm sm:text-base">Courses</span>
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <a href="#" class="ml-1 sm:ml-2 text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
          <span class="font-medium text-sm sm:text-base">Web Development</span>
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <span class="ml-1 sm:ml-2 text-yellow-100 font-bold drop-shadow-lg text-sm sm:text-base dark:text-orange-400">
          Mastering Tailwind CSS
        </span>
      </div>
    </li>
  </ol>
</nav>

Navigation brutaliste

Un composant de navigation d’inspiration brutaliste pour les systèmes de réservation, avec un contraste élevé, en noir et blanc avec une couleur d’accent vive, et une réactivité totale avec la prise en charge du mode sombre. Chaque étape est clairement délimitée par une typographie audacieuse et un séparateur unique.

Ouvrir Aperçu

                <nav class="bg-white px-4 py-3 border-b-4 border-black font-mono dark:bg-black dark:border-white sm:px-6 lg:px-8" aria-label="Breadcrumb">
  <ol role="list" class="flex flex-wrap items-center space-x-0.5 sm:space-x-1.5">
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 pr-1 dark:text-white dark:hover:text-red-500">
        Booking
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Select Service
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Choose Date & Time
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Confirm Details
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center">
      <span class="text-red-500 uppercase text-sm font-extrabold tracking-widest px-1 dark:text-red-500" aria-current="page">
        Payment
      </span>
    </li>
  </ol>
</nav>

Fil d’Ariane sportif neumorphe

Un composant de navigation complexe et neumorphe conçu pour les applications de sport/fitness, avec des tons riches et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="flex items-center justify-center p-4 bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-gray-800 dark:to-gray-950 min-h-24 md:min-h-32 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center space-x-2 sm:space-x-4">
    <li>
      <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-700 dark:focus:ring-emerald-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark">
        <svg class="w-4 h-4 mr-1 sm:mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
        Home
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-emerald-600 dark:text-emerald-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-700 dark:focus:ring-emerald-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark group-hover:block">
        <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Team Avatar" class="w-5 h-5 sm:w-6 sm:h-6 rounded-full mr-1 object-cover shadow-md">
        Athletics
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-emerald-600 dark:text-emerald-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-sapphire-700 dark:focus:ring-sapphire-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark">
        <svg class="w-4 h-4 mr-1 sm:mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.472 2.72L14.75 5.442S13.435 7.15 11.25 7.203c-2.185.053-4.22-.924-4.22-.924S5.105 5.56 5.105 5.56L2.38 2.76A1 1 0 00.91 3.94l2.72 2.72c.983.983 2.87.983 2.87.983s-1.84.455-2.61.026a1 1 0 00-1.378 1.464l.6.6a1 1 0 001.4-.04c.77-.43 2.76 1.48 2.76 1.48s1.603 1.15 2.8 1.15c.57 0 1.1-.115 1.57-.31L16.06 17.5a1 1 0 001.41-1.41L11.53 10.74c.2-.47.31-1 .31-1.57 0-1.2-.4-2.22-1.15-2.8l1.48-1.48c.04.04.08.08.12.11l2.76 2.76a1 1 0 001.41-1.41l-2.72-2.72c-.983-.983-.983-2.87-.983-2.87s.455 1.84.026 2.61a1 1 0 001.464 1.378l.6-.6a1 1 0 00-.04-1.4C16.92 4.69 17.472 2.72 17.472 2.72zM15 6a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        Teams
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-sapphire-600 dark:text-sapphire-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      <span class="flex items-center text-ruby-700 dark:text-ruby-300 px-3 py-1 text-sm sm:text-base font-bold cursor-default shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark rounded-full">
        <img src="https://picsum.photos/id/1018/25/25" alt="Team Logo" class="w-5 h-5 sm:w-6 sm:h-6 rounded-full mr-1 object-cover shadow-md">
        Griffins Squad
      </span>
    </li>
  </ol>
</nav>

<style>
  /* Base light mode shadows */
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #bfd6d0, inset -5px -5px 10px #ffffff;
  }

  .shadow-outer-neumorphic-light {
    box-shadow: 5px 5px 10px #bfd6d0, -5px -5px 10px #ffffff;
  }

  /* Base dark mode shadows */
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #4a5568;
  }

  .dark .shadow-outer-neumorphic-dark {
    box-shadow: 5px 5px 10px #1a202c, -5px -5px 10px #4a5568;
  }

  /* Jewel Tone Theme Colors (Examples - extend as needed in tailwind.config.js) */
  .text-emerald-700 { color: #047857; }
  .dark .text-emerald-300 { color: #6ee7b7; }
  .hover\:text-emerald-900:hover { color: #064e3b; }
  .dark .hover\:text-emerald-100:hover { color: #ecfdf5; }

  .focus\:ring-emerald-700:focus { --tw-ring-color: #047857; }
  .dark .focus\:ring-emerald-300:focus { --tw-ring-color: #6ee7b7; }

  .text-emerald-600 { color: #059669; }
  .dark .text-emerald-400 { color: #34d399; }

  .text-sapphire-700 { color: #1d4ed8; }
  .dark .text-sapphire-300 { color: #93c5fd; }
  .hover\:text-sapphire-900:hover { color: #1e3a8a; }
  .dark .hover\:text-sapphire-100:hover { color: #eff6ff; }

  .focus\:ring-sapphire-700:focus { --tw-ring-color: #1d4ed8; }
  .dark .focus\:ring-sapphire-300:focus { --tw-ring-color: #93c5fd; }

  .text-sapphire-600 { color: #2563eb; }
  .dark .text-sapphire-400 { color: #60a5fa; }

  .text-ruby-700 { color: #b91c1c; }
  .dark .text-ruby-300 { color: #fca5a5; }

  /* Background gradient Adjustments */
  .from-emerald-50 { background-image: linear-gradient(to bottom right, #effdf5, var(--tw-gradient-to, #d1fae5)); /* Tailwind default */}
  .to-teal-100 { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #f0fdf4), #ccfbf1); /* Tailwind default */}

  .dark .from-gray-800 { background-image: linear-gradient(to bottom right, #2d3748, var(--tw-gradient-to, #2c313a)); /* Tailwind default */}
  .dark .to-gray-950 { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #1a202c), #0f172a); /* Tailwind default */}

  /* Note: For full control and proper dark mode color overriding, define custom color palettes in tailwind.config.js */
  /* Example tailwind.config.js extension */
  /*
  module.exports = {
    darkMode: 'class',
    theme: {
      extend: {
        colors: {
          emerald: {
            50: '#effdf5',
            100: '#d1fae5',
            300: '#6ee7b7',
            400: '#34d399',
            600: '#059669',
            700: '#047857',
            800: '#065f46',
            900: '#064e3b'
          },
          sapphire: {
            50: '#eff6ff',
            100: '#dbeafe',
            300: '#93c5fd',
            400: '#60a5fa',
            600: '#2563eb',
            700: '#1d4ed8',
            800: '#1e40af',
            900: '#1e3a8a'
          },
          ruby: {
            50: '#fef2f2',
            100: '#fee2e2',
            300: '#fca5a5',
            400: '#ef4444',
            600: '#dc2626',
            700: '#b91c1c',
            800: '#991b1b',
            900: '#7f1d1d'
          }
        },
        boxShadow: {
          'inner-neumorphic-light': 'inset 5px 5px 10px #bfd6d0, inset -5px -5px 10px #ffffff',
          'outer-neumorphic-light': '5px 5px 10px #bfd6d0, -5px -5px 10px #ffffff',
          'inner-neumorphic-dark': 'inset 5px 5px 10px #1a202c, inset -5px -5px 10px #4a5568',
          'outer-neumorphic-dark': '5px 5px 10px #1a202c, -5px -5px 10px #4a5568'
        }
      }
    }
  }
  */
</style>

Monospace_Developer_Breadcrumb_Navigation

Un composant de navigation réactif avec une esthétique monospace/développeur et une palette de couleurs rétro/vintage, conçu pour la documentation et les sites wiki. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-2 md:space-x-4 font-mono text-xs md:text-sm lg:text-base p-2 rounded-md
    bg-gray-100 dark:bg-gray-800
    text-gray-700 dark:text-gray-300
    border border-gray-300 dark:border-gray-700
    shadow-sm dark:shadow-md">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center
        text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
        transition-colors duration-200
        px-2 py-1 rounded-sm
        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <svg class="w-3 h-3 mr-1 md:mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
          </path>
        </svg>
        _HOME
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
          </path>
        </svg>
        <a href="#" class="
          text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
          transition-colors duration-200
          px-2 py-1 rounded-sm
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          _DOCS
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
          </path>
        </svg>
        <a href="#" class="
          text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
          transition-colors duration-200
          px-2 py-1 rounded-sm
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          _GETTING_STARTED
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd">
          </path>
        </svg>
        <span class="
          text-blue-600 dark:text-blue-400
          font-bold
          px-2 py-1
          cursor-default">
          _INSTALLATION
        </span>
      </div>
    </li>
  </ol>
</nav>

Bauhaus_Music_Breadcrumb

Un simple composant de navigation inspiré du Bauhaus pour les plates-formes musicales/audio, avec des tons bleus d’entreprise et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
    <li class="inline-flex items-center">
      <a href="#"
        class="inline-flex items-center text-sm font-medium text-blue-800 hover:text-blue-950 dark:text-blue-300 dark:hover:text-white px-2 py-1 rounded-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-blue-300 dark:hover:border-blue-700"
        aria-current="page">
        <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 dark:text-blue-400" 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-800 hover:text-blue-950 dark:text-blue-300 dark:hover:text-white px-2 py-1 rounded-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-blue-300 dark:hover:border-blue-700 md:ms-2">Artists</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 dark:text-blue-400" 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-semibold text-blue-900 dark:text-white px-2 py-1 rounded-sm md:ms-2">The Electroniks</span>
      </div>
    </li>
  </ol>
</nav>

RetroRealEstateFil d’Ariane

Un composant de navigation simple et réactif dans un style rétro/vintage aux couleurs d’automne, adapté aux annonces immobilières, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="flex justify-center py-4 px-2 sm:px-4 text-sm md:text-base bg-gradient-to-b from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-800" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-2 sm:space-x-4">
    <li class="inline-flex items-center">
      <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
        <svg class="w-4 h-4 mr-1 sm:mr-2 text-orange-700 dark:text-orange-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
        </svg>
        Home
      </a>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
          Properties
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
          Houses
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <span class="text-stone-600 dark:text-stone-400 font-light font-serif tracking-wide pr-1 sm:pr-0">
          123 Vintage Lane
        </span>
      </div>
    </li>
  </ol>
</nav>

Composant de navigation du fil d’Ariane

Un composant de navigation complexe et monochromatique conçu pour les portefeuilles, doté d’une interface utilisateur en mode sombre et d’une réactivité totale.

Ouvrir Aperçu

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse bg-gray-900 dark:bg-gray-800 p-3 rounded-lg shadow-lg">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-400 hover:text-white dark:text-gray-500 dark:hover:text-white transition-colors duration-200">
        <svg class="w-4 h-4 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-gray-400 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-gray-400 hover:text-white dark:text-gray-500 dark:hover:text-white md:ms-2 transition-colors duration-200">Projects</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 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-gray-200 dark:text-gray-400 md:ms-2">Web Development</span>
      </div>
    </li>
    <li aria-current="page" class="hidden sm:inline-flex">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 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-gray-200 dark:text-gray-400 md:ms-2">E-commerce Platform</span>
      </div>
    </li>
  </ol>
</nav>

Paper_Jewel_Tone_Breadcrumb_Navigation

Un composant de navigation complexe, inspiré du papier/de l’imprimé, aux tons de bijoux, adapté aux sites de conseil/services. Il comporte des éléments riches et interactifs et prend en charge une réactivité totale et le mode sombre.

Ouvrir Aperçu

                <nav class="flex justify-center px-4 py-3 bg-white dark:bg-gray-900 shadow-md sm:py-4 md:py-5" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2 sm:space-x-4 md:space-x-6 overflow-x-auto whitespace-nowrap text-sm sm:text-base lg:text-lg">
    <li class="flex items-center group">
      <a href="#home" class="flex items-center text-gray-600 dark:text-gray-400 hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 rounded px-1 -mx-1 py-0.5" aria-label="Home">
        <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 mr-1.5 align-middle" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
        </svg>
        <span class="text-ruby-700 dark:text-ruby-400 font-semibold group-hover:underline hidden sm:inline">Home</span>
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-600 mx-2 sm:mx-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
      </svg>
    </li>

    <li class="flex items-center group">
      <a href="#services" class="text-gray-600 dark:text-gray-400 hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 rounded px-1 -mx-1 py-0.5">
        <span class="text-sapphire-700 dark:text-sapphire-400 font-medium group-hover:underline">Services</span>
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-600 mx-2 sm:mx-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
      </svg>
    </li>

    <li class="flex items-center group">
      <a href="#consulting" class="text-gray-600 dark:text-gray-400 hover:text-emerald-700 dark:hover:text-emerald-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 rounded px-1 -mx-1 py-0.5">
        <span class="text-amethyst-700 dark:text-amethyst-400 font-medium group-hover:underline">Strategic Consulting</span>
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-600 mx-2 sm:mx-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
      </svg>
    </li>

    <li class="flex items-center group" aria-current="page">
      <span class="text-emerald-700 dark:text-emerald-400 font-semibold px-2 py-1 rounded-md bg-emerald-100 dark:bg-emerald-900 border border-emerald-300 dark:border-emerald-700 shadow-sm transition-colors duration-200">
        Digital Transformation
      </span>
    </li>
  </ol>
</nav>

<style>
  /* Custom colors for Jewel Tones - Add to your Tailwind config or use direct classes */
  .text-emerald-700 { color: #047857; }
  .dark .text-emerald-400 { color: #34d399; }
  .bg-emerald-100 { background-color: #d1fae5; }
  .dark .bg-emerald-900 { background-color: #064e3b; }
  .border-emerald-300 { border-color: #6ee7b7; }
  .dark .border-emerald-700 { border-color: #047857; }

  .text-ruby-700 { color: #B91C1C; }
  .dark .text-ruby-400 { color: #F87171; }
  
  .text-sapphire-700 { color: #1E40AF; }
  .dark .text-sapphire-400 { color: #60A5FA; }

  .text-amethyst-700 { color: #6B21A8; }
  .dark .text-amethyst-400 { color: #A78BFA; }
</style>

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.

Ouvrir Aperçu

                <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>

Earth_Tones_Gradient_Breadcrumb_Navigation

Un composant de navigation complexe et réactif conçu pour les sites Web d’actualités et de journalisme, avec des transitions de dégradé terreux et une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse bg-gradient-to-r from-stone-100 via-stone-50 to-amber-50 dark:from-stone-800 dark:via-stone-700 dark:to-amber-950 p-2 sm:p-3 rounded-lg shadow-lg dark:shadow-stone-950/50 transition-all duration-300 ease-in-out">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-stone-700 hover:text-stone-900 dark:text-stone-300 dark:hover:text-white transition-colors duration-200">
        <svg class="w-4 h-4 me-2.5 text-amber-600 dark:text-amber-400 transition-colors duration-200" 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 class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-400" 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-stone-700 hover:text-stone-900 md:ms-2 dark:text-stone-300 dark:hover:text-white transition-colors duration-200 group-hover:text-amber-700 dark:group-hover:text-amber-500">
          Categories
        </a>
      </div>
    </li>
    <li class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-400" 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-stone-700 hover:text-stone-900 md:ms-2 dark:text-stone-300 dark:hover:text-white transition-colors duration-200 group-hover:text-amber-700 dark:group-hover:text-amber-500">
          Politics
        </a>
      </div>
    </li>
    <li aria-current="page" class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-400" 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-semibold text-amber-800 md:ms-2 dark:text-amber-300 transition-colors duration-200 group-hover:text-amber-900 dark:group-hover:text-amber-200">
          Current Affairs Article Title
        </span>
      </div>
    </li>
  </ol>
</nav>