検索コンポーネント

カテゴリ

コンポーネントナビゲーションバー

ナビゲーションバー

通常、ページの上部にあり、メインリンクが含まれています

アールデコ調のナビゲーションバー

アールデコ調のレスポンシブなCRM/ビジネスツール用ナビゲーションバーで、幾何学模様、豊かな宝石の色調、ダークモードのサポートが特徴です。インタラクティブな要素を含む適度な複雑さで設計されています。

                <nav class="bg-gradient-to-r from-emerald-700 to-emerald-900 dark:from-gray-900 dark:to-gray-950 p-4 shadow-xl font-sans relative z-50">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
      </svg>
      <a href="#" class="text-white text-2xl font-bold tracking-wider uppercase font-serif antialiased">CRM Suite</a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300" onclick="this.nextElementSibling.classList.toggle('hidden')">
        <svg class="h-8 w-8" 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>

    <!-- Navigation Links (Desktop) -->
    <div class="hidden md:flex space-x-8 lg:space-x-12 items-center">
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Dashboard
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Customers
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Sales
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Analytics
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Settings
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
    </div>

    <!-- User Actions (Desktop) -->
    <div class="hidden md:flex items-center space-x-6">
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300 rounded-full p-2 relative group">
        <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span class="absolute -top-1 -right-1 inline-flex items-center justify-center px-2 py-1 text-xs font-semibold leading-none text-red-100 bg-red-600 rounded-full">3</span>
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </button>
      <div class="relative group">
        <img class="h-9 w-9 rounded-full object-cover cursor-pointer border-2 border-emerald-300 hover:border-emerald-500 transition-colors duration-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
        <!-- Dropdown placeholder (can be implemented with JS for full functionality) -->
        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg py-1 hidden group-hover:block transition-all duration-300 ease-out transform scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 z-10">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-emerald-100 dark:hover:bg-gray-700">Profile</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-emerald-100 dark:hover:bg-gray-700">Settings</a>
          <form action="#" method="POST">
            <button type="submit" class="block w-full text-left px-4 py-2 text-red-600 hover:bg-emerald-100 dark:hover:bg-gray-700 dark:text-red-400">Sign Out</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (Collapsed by default) -->
  <div class="hidden md:hidden absolute top-full left-0 w-full bg-gradient-to-b from-emerald-800 to-emerald-900 dark:from-gray-900 dark:to-gray-950 shadow-md pb-4 pt-2 animate-fade-in-down">
    <div class="flex flex-col items-center space-y-4">
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Dashboard</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Customers</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Sales</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Analytics</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Settings</a>
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300 rounded-full p-2 relative inline-flex items-center">
        <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span class="ml-2 text-white">Notifications <span class="text-red-300">(3)</span></span>
      </button>
      <img class="h-10 w-10 rounded-full object-cover border-2 border-emerald-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
    </div>
  </div>
</nav>

<style>
  /* This is a simple animation for the mobile menu. 
     For a real-world scenario, you'd use a JS toggle.
     The 'hidden' class is toggled directly on the element in the HTML for demonstration.
      Tailwind's 'animate-fade-in-down' requires a keyframe definition within a CSS file or style block. 
     For a pure HTML/Tailwind solution, more complex animations might rely on utility classes alone 
     or external configuration, but for 'moderate complexity' with some 'interactive features' (like an expanding menu),
     a small style block for keyframes is practical and doesn't break the 'no JS' rule for the *component display* itself.
  */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out forwards;
  }
</style>

Luxury_Premium_Dating_Social_NavBar

デート/ソーシャルプラットフォーム向けのラグジュアリー/プレミアムスタイルのナビゲーションバーで、エレガントなタイポグラフィ、ハイコントラストのカラースキーム、ダークモードをサポートするレスポンシブデザインが特徴です。プロフィールアバターや通知アイコンなどのインタラクティブな要素が含まれています。

開けるプレビュー

                <nav class="bg-gradient-to-r from-purple-900 to-indigo-900 dark:from-gray-950 dark:to-black shadow-lg py-4 px-6 md:px-12 fixed w-full z-50 top-0">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-white font-serif text-3xl md:text-4xl font-extrabold tracking-wider hover:text-purple-300 dark:hover:text-gray-400 transition duration-300 ease-in-out">
      LuxeMatch
    </a>

    <!-- Navigation Links (Hidden on small screens, shown on medium and up) -->
    <div class="hidden md:flex space-x-8 lg:space-x-12">
      <a href="#" class="text-gray-300 text-lg font-semibold hover:text-white dark:hover:text-gray-300 transition duration-300 ease-in-out relative group">
        Matches
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-gray-300 text-lg font-semibold hover:text-white dark:hover:text-gray-300 transition duration-300 ease-in-out relative group">
        <i class="fas fa-heart text-red-400 mr-2"></i>Explore
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
      <a href="#" class="text-gray-300 text-lg font-semibold hover:text-white dark:hover:text-gray-300 transition duration-300 ease-in-out relative group">
        Messages
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
      </a>
    </div>

    <!-- User Actions (Profile, Notifications, Menu Icon) -->
    <div class="flex items-center space-x-6">
      <!-- Notification Icon -->
      <div class="relative">
        <button class="text-white hover:text-purple-300 dark:hover:text-gray-400 transition duration-300 ease-in-out focus:outline-none">
          <svg class="h-7 w-7 md:h-8 md:w-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" clip-rule="evenodd" fill-rule="evenodd"></path>
          </svg>
        </button>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center p-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full">3</span>
      </div>

      <!-- Profile Avatar -->
      <a href="#" class="block relative rounded-full group focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-gray-400">
        <img class="h-10 w-10 md:h-12 md:w-12 rounded-full object-cover border-2 border-white dark:border-gray-500 transform transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/women/42.jpg" alt="User Avatar">
      </a>

      <!-- Mobile Menu Button (Hamburger) -->
      <button class="md:hidden text-white focus:outline-none outline-none focus:ring-2 focus:ring-white dark:focus:ring-gray-400">
        <svg class="h-8 w-8" 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 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Artistic_Sepia_Navigation_Bar

シンプルで応答性の高いナビゲーションバーは、ダークモードのサポートを含む、ファッションや美容ブランドに適した、柔らかく芸術的なセピア調の美学を備えています。

開けるプレビュー

                <nav class="bg-amber-50 dark:bg-stone-900 border-b border-amber-100 dark:border-stone-700 font-sans">
  <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-shrink-0 flex items-center">
        <a href="#" class="text-amber-800 dark:text-amber-200 text-2xl font-bold font-serif tracking-wide">Lumière</a>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          Collections
        </a>
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          New Arrivals
        </a>
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          About Us
        </a>
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          Contact
        </a>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-100 hover:bg-amber-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon name: outline/menu -->
          <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. -->
          <!-- Heroicon name: outline/x -->
          <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>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        Collections
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        New Arrivals
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        About Us
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        Contact
      </a>
    </div>
  </div>
</nav>

Neon_Glow_Navbar_Music_Audio

音楽/オーディオプラットフォーム用の複雑でレスポンシブなナビゲーションバーコンポーネントで、ネオン/グローエフェクトと温かみのあるニュートラルカラースキームが特徴です。ダークモードのサポートとインタラクティブな要素が含まれています。

開けるプレビュー

                <nav class="bg-gradient-to-r from-stone-100 to-amber-50 dark:from-stone-900 dark:to-orange-950/50 shadow-lg px-4 py-3 md:py-4 transition-all duration-300">
  <div class="container mx-auto flex items-center justify-between flex-wrap">
    <!-- Logo and Home Link -->
    <div class="flex items-center flex-shrink-0 text-stone-800 dark:text-orange-100 mr-6">
      <svg class="fill-current h-8 w-8 mr-2 drop-shadow-[0_0_5px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_8px_rgba(253,186,116,0.9)]" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 3a9 9 0 00-9 9c0 4.97 4.03 9 9 9s9-4.03 9-9a9 9 0 00-9-9zm0 16a7 7 0 110-14 7 7 0 010 14zM12 8a1 1 0 00-1 1v4a1 1 0 002 0V9a1 1 0 00-1-1z"/>
      </svg>
      <span class="font-black text-xl tracking-tight text-stone-800 dark:text-orange-100 drop-shadow-[0_0_5px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_8px_rgba(253,186,116,0.9)]">Pulse<span class="text-orange-400 dark:text-amber-300">Tune</span></span>
    </div>

    <!-- Mobile Menu Button -->
    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-stone-500 border-stone-400 hover:text-orange-600 hover:border-orange-600 dark:text-orange-300 dark:border-orange-400 dark:hover:text-amber-500 dark:hover:border-amber-500 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-amber-400 group">
        <svg class="fill-current h-3 w-3 drop-shadow-[0_0_3px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_5px_rgba(253,186,116,0.9)] group-hover:text-orange-600 dark:group-hover:text-amber-500" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
      </button>
    </div>

    <!-- Nav Links (hidden by default on mobile, shown on large screens) -->
    <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden transition-all duration-300" data-target-id="navbar-menu">
      <div class="text-sm lg:flex-grow mt-4 lg:mt-0">
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
          Home
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
          Browse
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
          Playlists
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 font-medium transition-colors duration-200 relative group">
          Radio
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
      </div>

      <!-- Search Bar and User Profile -->
      <div class="flex items-center mt-4 lg:mt-0 space-x-4">
        <!-- Search Bar -->
        <div class="relative">
          <input type="text" placeholder="Search music..." class="bg-stone-50 dark:bg-orange-900 border border-stone-300 dark:border-orange-800 rounded-full py-2 pl-10 pr-4 text-sm text-stone-800 dark:text-orange-100 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-amber-300 focus:border-transparent transition-all duration-200 shadow-sm drop-shadow-[0_0_3px_rgba(251,191,36,0.3)] dark:drop-shadow-[0_0_6px_rgba(253,186,116,0.6)]">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-stone-400 dark:text-orange-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>

        <!-- User Profile Dropdown -->
        <div class="relative group">
          <button class="flex items-center space-x-2 text-stone-700 dark:text-orange-200 focus:outline-none">
            <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-orange-400 dark:border-amber-300 glow-on-pfp transition-transform duration-200 hover:scale-105">
            <span class="hidden md:block font-medium text-sm text-stone-700 dark:text-orange-200">Jane Doe</span>
            <svg class="h-4 w-4 ml-1 text-stone-500 dark:text-orange-300 group-hover:rotate-180 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <!-- Dropdown Menu -->
          <div class="absolute right-0 mt-2 w-48 bg-stone-50 dark:bg-orange-900 rounded-md shadow-lg py-1 z-20 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-right border border-stone-200 dark:border-orange-850">
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Settings</a>
            <div class="border-t border-stone-200 dark:border-orange-800 my-1"></div>
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Sign Out</a>
          </div>
        </div>

        <!-- Dark Mode Toggle -->
        <button id="dark-mode-toggle" aria-label="Toggle dark mode" class="p-2 rounded-full text-stone-600 dark:text-orange-300 bg-stone-100 dark:bg-orange-800 hover:bg-stone-200 dark:hover:bg-orange-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-amber-300 drop-shadow-[0_0_3px_rgba(251,191,36,0.3)] dark:drop-shadow-[0_0_6px_rgba(253,186,116,0.6)]">
          <svg class="h-5 w-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
          </svg>
          <svg class="h-5 w-5 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.368A5.99 5.99 0 0110 18a5.99 5.99 0 01-4.541-2.368l-.707.707a1 1 0 001.414 1.414L10 18.414l3.828 3.828a1 1 0 001.414-1.414l-.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm15.364 6.364l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4.636 4.636l-.707-.707a1 1 0 011.414-1.414l.707.707a1 1 0 01-1.414 1.414z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

<style>
  /* This CSS is for demonstration of glow effects where Tailwind classes aren't sufficient. */
  /* In a real project, consider integrating these via plugins if needed or as direct CSS for unique effects. */
  .glow-on-hover {
    box-shadow: 0 0 5px rgba(251, 191, 36, 0.5), 0 0 10px rgba(251, 191, 36, 0.3);
    transition: all 0.3s ease-in-out;
  }
  .dark .glow-on-hover {
    box-shadow: 0 0 8px rgba(253, 186, 116, 0.7), 0 0 15px rgba(253, 186, 116, 0.5);
  }
  .group:hover .glow-on-hover {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.8), 0 0 15px rgba(251, 191, 36, 0.5);
  }
  .dark .group:hover .glow-on-hover {
    box-shadow: 0 0 10px rgba(253, 186, 116, 0.9), 0 0 20px rgba(253, 186, 116, 0.7);
  }

  .glow-on-pfp {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  }
  .dark .glow-on-pfp {
    box-shadow: 0 0 10px rgba(253, 186, 116, 0.8);
  }
  .dark .glow-on-pfp {
     filter: drop-shadow(0 0 8px rgba(253, 186, 116, 0.8));
  }

  /* Basic JS for mobile menu and dark mode toggle */
  /* Add this script in your actual HTML, likely at the end of body */
  /*
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const mobileMenuButton = document.querySelector('button[aria-label="Toggle navigation"]');
      const navbarMenu = document.querySelector('[data-target-id="navbar-menu"]');

      if (mobileMenuButton && navbarMenu) {
        mobileMenuButton.addEventListener('click', () => {
          navbarMenu.classList.toggle('hidden');
        });
      }

      const darkModeToggle = document.getElementById('dark-mode-toggle');
      if (darkModeToggle) {
        darkModeToggle.addEventListener('click', () => {
          document.documentElement.classList.toggle('dark');
          localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
        });

        // Check for saved theme in localStorage
        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        }
      }
    });
  </script>
  */
</style>

Cyberpunk_Retro_Food_Navbar

サイバーパンクレトロな美学を備えたシンプルでレスポンシブなナビゲーションバーで、食品/レストランのWebサイト向けに設計されています。暗い背景、落ち着いたアクセントカラー、ダークモードのサポートが特徴です。

開けるプレビュー

                <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>