Composants Barre de navigation Barre de navigation en mode sombre

Barre de navigation en mode sombre

Composant de la barre de navigation avec effets réactifs et prise en charge du thème sombre.

Aperçu

HTML Code

<nav class="bg-gray-800 p-4 text-white">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-lg font-semibold">My Website</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Services</a>
      <a href="#" class="hover:underline">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-6" 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="M4 6h16M4 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Composants associés

Barre de navigation brutaliste

Une barre de navigation réactive conçue dans un style brutaliste avec des couleurs à haute saturation, pour la consommation de blogs et de contenu, avec prise en charge du thème sombre.

Ouvrir

Barre de navigation rétro/vintage pour les réseaux sociaux

Barre de navigation rétro/vintage pour les médias sociaux avec une palette de couleurs analogue, une complexité simple, une prise en charge réactive et un thème sombre.

Ouvrir

Barre de navigation

Composant de barre de navigation réactive en mode sombre à l’aide de Tailwind CSS

Ouvrir