Componenti Navigazione nella barra laterale Componente di navigazione della barra laterale

Componente di navigazione della barra laterale

Un componente di navigazione della barra laterale reattivo con uno stile scheumorfico con supporto per temi scuri utilizzando Tailwind CSS.

Anteprima

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

Componenti correlati

RetroPastelSocialSidebar

Un componente di navigazione della barra laterale semplice e reattivo con design retrò/vintage anni '80/'90, colori pastello e supporto per la modalità scura, progettato per le interfacce dei social media che utilizzano Tailwind CSS.

Aperto

Barra di navigazione laterale Brutalismo

Un componente di navigazione della barra laterale in stile brutalista con toni della terra, complessità moderata, reattività e supporto per la modalità oscura, progettato per blog/siti di contenuti che utilizzano Tailwind CSS.

Aperto

Gaming_Sidebar_Navigation_Component

Un componente di navigazione reattivo della barra laterale per siti Web di giochi, caratterizzato da un design monospace/ispirato agli sviluppatori con contrasto elevato, supporto per la modalità oscura ed elementi interattivi. Ideale per interfacce di gioco e portali della community.

Aperto