CCHub Logo CCHub Tailwind Collection
コンポーネント スティッキーナビゲーション スティッキーナビゲーションコンポーネント - ダークモードパステル

スティッキーナビゲーションコンポーネント - ダークモードパステル

ダークモード用に設計されたスティッキーナビゲーションバーで、レスポンシブなレイアウトとパステルカラーのアクセントが特徴です。ナビゲーションバーは、ユーザーがスクロールしてもビューポートの上部に留まるため、コンテンツの多いページの使いやすさが向上します。ロゴやサイトのタイトル、ナビゲーションリンクのプレースホルダーが含まれており、Tailwind CSSでスタイル設定され、モダンですっきりとした外観になっています。

プレビュー

HTMLコード 

<nav class="dark:bg-gray-900 dark:text-gray-200 bg-gray-100 text-gray-800 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <!-- Logo or Site Title -->
    <div class="text-lg font-bold">
      <a href="#" class="dark:text-pink-300 text-purple-600 hover:dark:text-pink-400 hover:text-purple-700">Your Logo</a>
    </div>
    <!-- Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Home</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">About</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Services</a>
      <a href="#" class="hover:dark:text-pink-400 hover:text-purple-700 transition duration-300 ease-in-out">Contact</a>
    </div>
    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="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-4 6h4"></path>
        </svg>
      </button>
    </div>
  </div>
  <!-- Mobile Menu (Dropdown - hidden by default) -->
  <div class="md:hidden border-t dark:border-gray-700 border-gray-200">
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Home</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">About</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Services</a>
    <a href="#" class="block py-2 px-4 text-sm hover:dark:bg-gray-700 hover:bg-gray-200">Contact</a>
  </div>
</nav>

関連コンポーネント

スティッキーナビゲーションコンポーネント

eコマース用のスティッキーナビゲーションコンポーネントで、鮮やかな色のミニマリスト/フラットなデザインが特徴です。ロゴ、検索バー、カートアイコン、ユーザーアバターが含まれており、すべてTailwind CSSでスタイル設定されており、応答性とダークテーマのサポートが可能です。

開ける

スティッキーナビゲーションコンポーネント

Skeuomorphism デザイン、レスポンシブ、ダーク テーマをサポートするスティッキー ナビゲーション コンポーネント。Tailwind CSSを使用します。

開ける

スティッキーナビゲーションコンポーネント

ソーシャルメディアインターフェイス用に設計された、鮮やかな色の複雑でスキューモーフィックなスティッキーナビゲーションバー。レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが含まれています。プロフィール画像、検索バー、通知、メッセージングアイコンを備えています。

開ける