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>

関連コンポーネント

サイドバーナビゲーションコンポーネント - Memphis Muted (ミュート)

メンフィスのデザインに触発された複雑でレスポンシブなサイドバーナビゲーションコンポーネントで、落ち着いた配色で、ドキュメントやWikiサイトに適しています。ダークモードのサポートとインタラクティブな要素が含まれています。

開ける

ソーシャルメディアサイドバーナビゲーションコンポーネント

レスポンシブ ソーシャル メディア サイドバー ナビゲーション コンポーネント ダーク テーマ ブルータリズム、アース トーン、および複雑なデザイン原則を使用したサポート。JavaScript は必要ありません。

開ける

Organic_Nature_Sepia_Healthcare_Sidebar_Navigation_Component

セピア/ブラウンの色調を使用した有機的で自然にインスパイアされたデザインのシンプルでレスポンシブなサイドバーナビゲーションコンポーネントで、ヘルスケアおよび医療アプリケーションに適しています。ダークモードのサポートが含まれています。

開ける