CCHub Logo CCHub Tailwind Collection
Komponenten Navigation in der Seitenleiste Navigationskomponente in der Seitenleiste

Navigationskomponente in der Seitenleiste

Eine reaktionsschnelle Navigationskomponente in der Seitenleiste, die auf skeuomorphe Weise mit Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS gestaltet ist.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Navigation in der Seitenleiste von Glassmorphism

Eine reaktionsschnelle Navigationskomponente in der Seitenleiste mit Glassmorphism-Design, Unterstützung für den Dunkelmodus und Verwendung von Tailwind CSS. Verfügt über mattglasähnliche, durchscheinende Elemente mit Unschärfeeffekten.

Offen

Navigationskomponente für die Social-Media-Seitenleiste

Responsive Social-Media-Sidebar-Navigationskomponente mit Unterstützung für dunkle Themen unter Verwendung von Brutalismus, Erdtönen und komplexen Designprinzipien. Kein JavaScript erforderlich.

Offen

RetroPastelSocialSidebar

Eine einfache und reaktionsschnelle Navigationskomponente in der Seitenleiste mit Retro-/Vintage-Design der 80er/90er Jahre, Pastellfarben und Unterstützung für den Dunkelmodus, die für Social-Media-Schnittstellen mit Tailwind CSS entwickelt wurde.

Offen