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

Navigationskomponente in der Seitenleiste

Eine einfache, reaktionsschnelle Seitenleistennavigation für Social-Media-Anwendungen, optimiert für den Dunkelmodus mit einem analogen Farbschema. Es enthält einen Profilbereich mit einem Avatar und einem Benutzernamen sowie Navigationslinks. Das Design verwendet Tailwind CSS für das Styling und die Reaktionsfähigkeit und bietet Unterstützung für den Dunkelmodus über das integrierte dark:-Präfix von Tailwind.

Offen

Glassmorphism-Navigationskomponente in der Seitenleiste

Eine Seitenleisten-Navigationskomponente im Glassmorphism-Stil für Blogs mit einem monochromatischen Farbschema. Es handelt sich um ein einfaches, responsives Design mit Unterstützung für den Dunkelmodus, das nur HTML und Tailwind CSS verwendet. Die Seitenleiste enthält einen Website-Titel, Navigationslinks und einen Profilbereich.

Offen

RetroSidebarNavigation

Eine Seitenleisten-Navigationskomponente im Retro-/Vintage-Stil mit responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen