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.

Aperçu

HTML Code

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

Composants associés

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

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