Composants Navigation dans la barre latérale Brutalisme Barre latérale Navigation

Brutalisme Barre latérale Navigation

Composant de navigation dans la barre latérale réactif avec un design brutal, une palette de couleurs vibrantes et une mise en page simple à des fins de blog/contenu. Inclut la prise en charge du mode sombre.

Aperçu

HTML Code

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

  <!-- Sidebar -->
  <div class="w-64 px-4 py-6 bg-yellow-400 dark:bg-yellow-700 border-r-4 border-black dark:border-white">
    <h2 class="text-2xl font-bold text-black dark:text-white">Navigation</h2>
    <nav class="mt-8">
      <ul>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Home</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Articles</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">About</a>
        </li>
        <li class="mb-4">
          <a href="#" class="block text-black dark:text-white hover:underline text-xl">Contact</a>
        </li>
      </ul>
    </nav>
  </div>

  <!-- Content Area (for demonstration) -->
  <div class="flex-1 p-10">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Main Content Area</h1>
    <p class="text-gray-700 dark:text-gray-300">
      This is where the main content of your blog or article would go.
      The sidebar provides navigation on the left.
    </p>
  </div>

</div>

Composants associés

Composant de navigation dans la barre latérale des médias sociaux

Composant de navigation dans la barre latérale des médias sociaux réactifs avec prise en charge du thème sombre utilisant le brutalisme, les tons de terre et les principes de conception complexes. Aucun JavaScript n’est nécessaire.

Ouvrir

Navigation dans la barre latérale

Composant de navigation dans la barre latérale réactif avec jeu de couleurs analogues et micro-interactions, y compris la prise en charge du thème sombre.

Ouvrir

Glassmorphism Navigation latérale

Une navigation complexe et réactive dans la barre latérale Glassmorphism pour un tableau de bord avec un schéma de couleurs complémentaire, la prise en charge du mode sombre et aucun JavaScript.

Ouvrir