Composants Navigation Composant de navigation de luxe

Composant de navigation de luxe

Un composant de navigation élégant et réactif pour les marques de mode et de beauté, doté d’un design sophistiqué en noir et blanc avec une couleur d’accentuation vive, une prise en charge du mode sombre et un minimum d’éléments.

Aperçu

HTML Code

<nav class="bg-white dark:bg-gray-900 shadow-sm dark:shadow-lg transition duration-300 ease-in-out">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        <!-- Logo -->
        <a href="#" class="flex-shrink-0 flex items-center">
          <span class="text-2xl font-bold tracking-wider text-black dark:text-white uppercase font-serif">LUXE</span>
        </a>
      </div>

      <div class="flex items-center">
        <!-- Desktop Navigation -->
        <div class="hidden md:flex md:space-x-8 font-medium">
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Home</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Shop</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Collections</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">About</a>
          <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 px-3 py-2 rounded-md transition duration-200 ease-in-out uppercase tracking-wide">Contact</a>
        </div>

        <!-- Mobile Menu Button -->
        <div class="-mr-2 flex md:hidden">
          <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-red-500 dark:focus:ring-red-400 transition duration-200 ease-in-out" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <!-- Icon when menu is closed -->
            <svg class="block h-6 w-6" 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="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <!-- Icon when menu is open -->
            <svg class="hidden h-6 w-6" 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="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile Menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 animate-fade-in-down">
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Home</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Shop</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Collections</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">About</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-red-600 dark:hover:text-red-500 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out uppercase tracking-wide">Contact</a>
    </div>
  </div>
</nav>

Composants associés

Composant de navigation

Un composant de navigation d’inspiration rétro/vintage conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir

Composant de navigation Material Design

Un composant de navigation Material Design simple et réactif pour les interfaces de médias sociaux à l’aide d’un schéma de couleurs en niveaux de gris. Dispose d’une mise en page épurée avec logo, liens de navigation, barre de recherche et avatar de l’utilisateur. Inclut la prise en charge du mode sombre à l’aide du préfixe dark : de Tailwind.

Ouvrir

Navigation dans le tableau de bord (Material Design)

Composant de navigation de tableau de bord de conception matérielle avec schéma de couleurs triadique et prise en charge du mode sombre.

Ouvrir