CCHub Logo CCHub Tailwind Collection
コンポーネント サイドバーナビゲーション サイドバーナビゲーションコンポーネント

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

Tailwind CSS を使用したダーク テーマのサポートを備えた、スキューモーフィックな方法でスタイル設定されたレスポンシブ サイドバー ナビゲーション コンポーネント。

プレビュー

HTMLコード 

<div class="flex">
  <aside class="bg-gray-900 text-white w-64 h-screen shadow-lg rounded-r-3xl p-5">
    <div class="flex flex-col items-center mb-10">
      <img class="rounded-full border-4 border-gray-700" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" width="100" height="100" />
      <h2 class="mt-3 text-xl font-bold">John Doe</h2>
      <p class="text-gray-400">Web Developer</p>
    </div>
    <nav>
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=1" alt="Icon" />
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=2" alt="Icon" />
            Profile
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=3" alt="Icon" />
            Settings
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=4" alt="Icon" />
            Help
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=5" alt="Icon" />
            Logout
          </a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="flex-1 p-10 bg-gray-200">
    <h1 class="text-3xl font-bold">Main Content Area</h1>
    <p>This is where your main content goes.</p>
  </main>
</div>

関連コンポーネント

サイドバーナビゲーションコンポーネント - 農業/農業

農業/農業のWebサイト用に設計された、複雑でミニマリストのサイドバーナビゲーションコンポーネント。ジュエルトーンの色、完全な応答性、ダークモードのサポート、および農業コンテキストのダッシュボードと管理システムに適した複数のインタラクティブ要素を備えています。

開ける

Brutalismサイドバーナビゲーション

レスポンシブサイドバーナビゲーションコンポーネント、ブルータリズムデザイン、鮮やかな配色、ブログ/コンテンツ用のシンプルなレイアウト。ダークモードのサポートが含まれています。

開ける

Glassmorphismサイドバーナビゲーション

Glassmorphismデザイン、ダークモードのサポート、およびTailwind CSSを使用したレスポンシブサイドバーナビゲーションコンポーネント。ぼかし効果のあるすりガラスのような半透明の要素が特徴です。

開ける