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

Eine minimalistische, reaktionsschnelle Navigationskomponente für die Seitenleiste mit Schwarz, Weiß und einer hellen Akzentfarbe, die für Gaming-Websites entwickelt wurde. Enthält Unterstützung für den Dunkelmodus.

Offen

Brutalismus Seitenleisten-Navigation

Responsive Sidebar-Navigationskomponente mit Brutalismus-Design, lebendigem Farbschema und einfachem Layout für Blog-/Content-Zwecke. Enthält Unterstützung für den Dunkelmodus.

Offen

Navigationskomponente in der Seitenleiste - Memphis stumm geschaltet

Eine komplexe, reaktionsschnelle Navigationskomponente in der Seitenleiste, die vom Memphis-Design inspiriert ist und ein gedämpftes Farbschema aufweist, das sich für Dokumentations- und Wiki-Seiten eignet. Enthält Unterstützung für den Dunkelmodus und interaktive Elemente.

Offen