Componentes Navegación en la barra lateral Brutalismo Barra lateral Navegación

Brutalismo Barra lateral Navegación

Componente de navegación de barra lateral receptivo con diseño brutalista, combinación de colores vibrantes y diseño simple para fines de blog / contenido. Incluye soporte para modo oscuro.

Vista previa

Código HTML

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

Componentes relacionados

Componente de navegación de la barra lateral

Un componente de navegación de barra lateral simple y receptivo con efectos de desplazamiento centrados en la microinteracción, diseñado para sitios web gubernamentales / de servicio público. Cuenta con un esquema de color análogo y compatibilidad con el modo oscuro.

Abrir

Componente de navegación de la barra lateral

Un componente de navegación de barra lateral receptivo diseñado en el estilo Brutalismo, perfecto para aplicaciones de comercio electrónico. Cuenta con colores vibrantes, alto contraste y múltiples elementos interactivos, incluidos enlaces a diferentes categorías de compras, opciones de cuentas de usuario y un vibrante botón de llamada a la acción para acceder al carrito de compras. El diseño también se adapta al modo oscuro.

Abrir

RetroPastelSocialSidebar

Un componente de navegación de barra lateral simple y receptivo con diseño retro / vintage de los 80 / 90, colores pastel y soporte para modo oscuro, diseñado para interfaces de redes sociales que usan Tailwind CSS.

Abrir