Categorie

Componenti Navigazione

Navigazione

Componenti che aiutano gli utenti a navigare all'interno del sito Web e a trovare i contenuti

Componente di navigazione

Un componente di navigazione reattivo con stile per la modalità oscura utilizzando Tailwind CSS.

                <nav class="bg-gray-900 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold">Brand</a>
            <a href="#" class="hidden md:block">Home</a>
            <a href="#" class="hidden md:block">About</a>
            <a href="#" class="hidden md:block">Services</a>
            <a href="#" class="hidden md:block">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
        </div>
    </div>
</nav>

<main class="bg-gray-800 min-h-screen p-4">
    <h1 class="text-3xl mb-4">Welcome to Our Website</h1>
    <img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
    <p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>

<footer class="bg-gray-900 text-white p-4">
    <div class="container mx-auto text-center">
        <p>© 2023 Navigation Component. All rights reserved.</p>
    </div>
</footer>

Componente di navigazione

Un componente di navigazione reattivo progettato per l'interfaccia utente in modalità scura, con collegamenti, menu a discesa e un logo, il tutto in stile CSS Tailwind.

Apri anteprima

                <nav class="bg-gray-800 p-4 fixed w-full">
    <div class="flex justify-between items-center">
        <div class="text-white text-lg font-bold">
            <a href="#" class="flex items-center">
                <img src="https://picsum.photos/40" alt="Logo" class="mr-2 rounded-full">
                MyApp
            </a>
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">Home</a>
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">About</a>
            <div class="relative">
                <button class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded flex items-center">Services
                    <svg class="w-4 h-4 ml-1" 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="M5 15l7-7 7 7"/>
                    </svg>
                </button>
                <div class="absolute left-0 hidden bg-gray-800 text-white mt-1 rounded shadow-md w-40">
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">Web Design</a>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">SEO</a>
                    <a href="#" class="block px-4 py-2 hover:bg-gray-700">Marketing</a>
                </div>
            </div>
            <a href="#" class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-300 hover:bg-gray-700 px-3 py-2 rounded 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-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
</nav>

<div class="mt-16 p-4">
    <h1 class="text-3xl text-white">Welcome to MyApp</h1>
    <p class="text-gray-300">This is an example of a dark mode navigation component using Tailwind CSS.</p>
</div>

<style>
    .dropdown:hover .dropdown-content {
        display: block;
    }
</style>

Componente di navigazione retrò

Un componente di navigazione in stile retrò con un'estetica vintage degli anni '80/'90, caratterizzato da un design reattivo e supporto per temi scuri utilizzando Tailwind CSS.

Apri anteprima

                <nav class="bg-white dark:bg-gray-800 shadow-lg p-6 rounded-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <span class="text-xl font-bold text-gray-800 dark:text-white">Retro Nav</span>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark: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-7 6h7"/>
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <div class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Home</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">About</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Services</a>
            <a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Contact</a>
        </div>
    </div>
</nav>

Componente di navigazione

Un componente di navigazione di ispirazione retrò/vintage progettato con Tailwind CSS, con effetti reattivi e supporto per temi scuri.

Apri anteprima

                <nav class="bg-gray-800 text-white py-4 shadow-lg">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-xl font-bold hover:text-gray-400 transition duration-300">RetroNav</a>
            <ul class="hidden md:flex space-x-4">
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Home</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">About</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Services</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Contact</a></li>
            </ul>
        </div>
        <div class="md:hidden">
            <button class="text-gray-400 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-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
</nav>

<div class="bg-gray-900 text-white p-8 flex flex-col items-center">
    <h1 class="text-3xl font-bold mb-4">Welcome to RetroNav</h1>
    <p class="mb-4">Experience the nostalgia of the 80s and 90s with our vintage-inspired designs.</p>
    <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-4 rounded-lg shadow-md">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600">
        <span class="font-semibold">User Name</span>
    </div>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
            color: white;
        }
        nav {
            background-color: #2c2c2c;
        }
    }
</style>

Componente di navigazione skeuomorfa

Un componente di navigazione scheumorfico progettato per imitare elementi del mondo reale come un pannello di controllo fisico o un cruscotto. Presenta un design reattivo, effetti al passaggio del mouse che simulano la pressione fisica dei pulsanti e supporto per temi scuri. La navigazione include ombre sottili, sfumature e texture per creare un aspetto tattile 3D che ricorda le interfacce fisiche.

Apri anteprima

                <!-- Skeuomorphic Navigation Component with Dark Mode Support -->
<nav class="w-full bg-gradient-to-b from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 p-2 transition-all duration-300">
  <!-- Container for the nav items -->
  <div class="flex flex-col md:flex-row items-center justify-between">
    
    <!-- Logo Area - Mimicking a metal plate with engraved logo -->
    <div class="flex items-center p-2 bg-gradient-to-r from-gray-300 to-gray-200 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-inner border border-gray-400 dark:border-gray-600 m-2">
      <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center shadow-lg border-2 border-gray-300 dark:border-gray-700">
        <span class="text-white font-bold text-xl">S</span>
      </div>
      <span class="ml-3 font-bold text-gray-700 dark:text-gray-200 tracking-wider text-shadow">SKEUOUI</span>
    </div>
    
    <!-- Navigation buttons - Mimicking physical buttons -->
    <div class="flex flex-wrap justify-center md:justify-end">
      <!-- Home Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
          </svg>
          Home
        </button>
        <div class="h-1 w-full bg-blue-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
      
      <!-- Products Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
          </svg>
          Products
        </button>
        <div class="h-1 w-full bg-green-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
      
      <!-- Services Button -->
      <div class="group m-2">
        <button class="px-6 py-3 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-lg text-gray-700 dark:text-gray-200 font-medium border border-gray-400 dark:border-gray-600 shadow-md hover:shadow-inner hover:translate-y-0.5 active:shadow-inner active:translate-y-1 transition-all duration-150 flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-purple-500 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
          </svg>
          Services
        </button>
        <div class="h-1 w-full bg-purple-500 rounded-b opacity-0 group-hover:opacity-100 transition-opacity"></div>
      </div>
    </div>
    
    <!-- User Profile - Mimicking an ID badge -->
    <div class="m-2 flex items-center bg-gradient-to-r from-blue-100 to-blue-50 dark:from-blue-900 dark:to-blue-800 p-2 rounded-lg border border-blue-200 dark:border-blue-700 shadow">
      <div class="relative">
        <img src="https://randomuser.me/api/portraits/men/42.jpg" alt="User" class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-600">
        <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></div>
      </div>
      <div class="ml-2">
        <div class="text-sm font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
        <div class="text-xs text-gray-600 dark:text-gray-400">Admin Panel</div>
      </div>
    </div>
  </div>
  
  <!-- Mobile Menu Toggle Button - Styled as a switch -->
  <div class="md:hidden mt-2 flex justify-center">
    <div class="relative w-16 h-8 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner border border-gray-400 dark:border-gray-600 flex items-center p-1 cursor-pointer">
      <div class="absolute left-1 w-6 h-6 bg-gradient-to-br from-white to-gray-200 dark:from-gray-600 dark:to-gray-800 rounded-full shadow transform transition-transform border border-gray-300 dark:border-gray-500"></div>
      <div class="w-full flex justify-between text-xs px-1 font-bold">
        <span class="text-gray-700 dark:text-gray-300">|</span>
        <span class="text-gray-700 dark:text-gray-300">|</span>
      </div>
    </div>
  </div>
</nav>

Componente di navigazione 3D

Un componente di navigazione 3D reattivo progettato con Tailwind CSS, con supporto per temi scuri ed elementi tridimensionali accattivanti.

Apri anteprima

                <nav class="bg-gray-800 shadow-xl p-4 rounded-lg">
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
      <h1 class="text-white ml-2 text-2xl font-bold">MyWebsite</h1>
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Home</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">About</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Services</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">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-7 6h7" />
        </svg>
      </button>
    </div>
  </div>
  <div class="md:hidden mt-2">
    <div class="flex flex-col space-y-2">
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Home</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">About</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Services</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Contact</a>
    </div>
  </div>
</nav>
<style>
  @media (prefers-color-scheme: dark) {
    nav {
      background-color: #1a202c;
    }
    .text-white {
      color: #f7fafc;
    }
    .text-gray-200 {
      color: rgba(255, 255, 255, 0.7);
    }
    .hover\:bg-gray-700:hover {
      background-color: #4a5568;
    }
    nav a:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
</style>

Barra di navigazione sfumata vetrosa

Questa barra di navigazione presenta un moderno design vetroso, che combina colori sfumati e un effetto vetro smerigliato per mantenere un effetto traslucido durante lo scorrimento.

Apri anteprima

                <nav class="fixed w-full backdrop-blur-lg bg-gradient-to-r from-purple-500/30 via-pink-500/30 to-indigo-500/30 border-b border-white/10 transition-all duration-300 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="flex items-center">
          <span class="text-white font-bold text-xl tracking-wider">PRISM</span>
          <div class="ml-2 h-8 w-8 rounded-full bg-white/20 flex items-center justify-center">
            <div class="h-4 w-4 bg-white rounded-full animate-pulse"></div>
          </div>
        </a>
      </div>
      
      <!-- Menu Items -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-8">
          <a href="#" class="group relative px-3 py-2 text-white font-medium">
            Home
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            Features
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            Pricing
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
          <a href="#" class="group relative px-3 py-2 text-white/70 hover:text-white font-medium transition-colors duration-200">
            About
            <span class="absolute bottom-0 left-0 w-full h-0.5 bg-white transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300"></span>
          </a>
        </div>
      </div>
      
      <!-- CTA Button -->
      <div>
        <button class="relative overflow-hidden px-6 py-2 bg-white/10 border border-white/20 rounded-full text-white font-medium hover:bg-white/20 transition-all duration-300 group">
          <span class="relative z-10">Get Started</span>
          <span class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"></span>
        </button>
      </div>
      
      <!-- Mobile menu button -->
      <div class="md:hidden">
        <button class="text-white p-2">
          <svg class="h-6 w-6" 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"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>