Composants Barre de navigation Barre de navigation minimaliste

Barre de navigation minimaliste

Un composant de barre de navigation réactif conçu dans un style minimaliste, prenant en charge le thème sombre et utilisant Tailwind CSS.

Aperçu

HTML Code

<nav class="bg-white dark:bg-gray-800 shadow-md">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0">
          <img class="h-8" src="https://picsum.photos/40/40" alt="Logo">
        </div>
        <div class="hidden md:flex md:space-x-8">
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Home</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">About</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Services</a>
          <a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
        </div>
      </div>
      <div class="flex items-center">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      </div>
    </div>
  </div>
</nav>

<!-- Mobile menu button -->
<div class="md:hidden">
  <button class="flex items-center p-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" aria-label="Toggle Navigation">
    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
    </svg>
  </button>
</div>

<!-- Mobile Menu -->
<div class="md:hidden">
  <div class="bg-white dark:bg-gray-800 shadow-md px-4 py-2 space-y-2">
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Home</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">About</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Services</a>
    <a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
  </div>
</div>

Composants associés

Barre de navigation du portefeuille

Une barre de navigation réactive avec prise en charge du thème sombre, conçue pour un site Web de portfolio utilisant les principes de conception matérielle et la palette de couleurs des tons de terre. Il comprend un logo de marque, des liens de navigation et un bouton d’appel à l’action. Le design est modérément complexe et s’adapte aux différentes tailles d’écran.

Ouvrir

Composant de la barre de navigation

Composant simple de barre de navigation réactive conçu pour un tableau de bord, doté d’un schéma de couleurs monochromatiques et de micro-interactions. Il comprend un support en mode sombre avec des effets de survol pour des animations engageantes.

Ouvrir

Barre de navigation

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

Ouvrir