Composants Barre de navigation Cyberpunk_Retro_Food_Navbar

Cyberpunk_Retro_Food_Navbar

Une barre de navigation simple et réactive à l’esthétique cyberpunk-rétro, conçue pour les sites Web de restauration et de restauration. Dispose d’un arrière-plan sombre, de couleurs d’accentuation sourdes et d’une prise en charge du mode sombre.

Aperçu

HTML Code

<nav class="bg-zinc-900 shadow-lg p-4 font-mono dark:bg-zinc-950">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-orange-400 text-2xl font-bold tracking-wider uppercase hover:text-orange-300 transition-colors duration-300 transform hover:scale-105">
      <span class="text-teal-400">&lt;</span>Bite<span class="text-teal-400">/&gt;</span>Stream
    </a>

    <!-- Mobile Menu Button -->
    <div class="md:hidden">
      <button class="text-gray-300 hover:text-orange-400 focus:outline-none focus:text-orange-400 dark:text-gray-400 dark:hover:text-orange-300">
        <svg class="h-6 w-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>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Menu
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Orders
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        About
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Contact
      </a>
      <a href="#" class="bg-teal-600 text-white px-4 py-1 rounded-md text-lg hover:bg-teal-500 transition-colors duration-300 neon-button">
        Sign In
      </a>
    </div>
  </div>
</nav>

Composants associés

Composant de la barre de navigation

Un composant de barre de navigation réactif conçu dans le style Material Design avec une palette de couleurs triadique, adapté aux interfaces de médias sociaux et incluant la prise en charge du thème sombre.

Ouvrir

Barre de navigation du blog

Barre de navigation réactive avec prise en charge du mode sombre pour les sites Web de blog/contenu. Dispose d’un design minimaliste / plat avec une palette de couleurs pastel.

Ouvrir

Luxury_Premium_Dating_Social_NavBar

Une barre de navigation de style luxe/premium pour les plateformes de rencontres/sociales, avec une typographie élégante, une palette de couleurs à contraste élevé et un design réactif avec prise en charge du mode sombre. Comprend des éléments interactifs tels qu’un avatar de profil et une icône de notification.

Ouvrir