CCHub Logo CCHub Tailwind Collection
Komponenten Navigation in der Seitenleiste Navigationskomponente für die Social-Media-Seitenleiste

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.

Vorschau

HTML-Code 

<div class="flex h-screen bg-stone-100 dark:bg-stone-900">

  <!-- Sidebar -->
  <div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out" id="sidebar">
    
    <!-- Profile Section -->
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full border-4 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100">Username</h2>
        <p class="text-sm text-stone-700 dark:text-stone-300">@userhandle</p>
      </div>
    </div>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Navigation -->
    <nav class="space-y-4">
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Feed</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Profile</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Messages</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Notifications</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Settings</a>
    </nav>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Footer Links -->
    <div class="flex flex-wrap gap-2 text-sm text-stone-700 dark:text-stone-300">
      <a href="#" class="hover:underline focus:underline">About</a>
      <a href="#" class="hover:underline focus:underline">Help</a>
      <a href="#" class="hover:underline focus:underline">Terms</a>
      <a href="#" class="hover:underline focus:underline">Privacy</a>
    </div>

  </div>

  <!-- Content Area - Example -->
  <div class="flex-1 p-6">
    <h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">Main Content Area</h1>
    </div>

</div>

Verwandte Komponenten

Navigationskomponente in der Seitenleiste

Eine einfache und reaktionsschnelle Navigationskomponente in der Seitenleiste, die für Dashboards entwickelt wurde, mit ansprechenden Animationen und einem erdigen Farbschema. Es unterstützt den Dunkelmodus.

Offen

Navigation in der Seitenleiste von Glassmorphism

Eine komplexe, reaktionsschnelle Glassmorphism-Seitenleistennavigation für ein Dashboard mit komplementärem Farbschema, Unterstützung für den Dunkelmodus und ohne JavaScript.

Offen

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