Components Navigation Components Brutalist Navigation Component

Brutalist Navigation Component

A brutalist navigation component with responsive behavior and dark theme support.

Preview

HTML Code

<nav class="bg-yellow-400 dark:bg-purple-900 p-6 font-mono border-4 border-black dark:border-yellow-400">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold text-black dark:text-yellow-400">Brutal Nav</div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Home</a></li>
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Docs</a></li>
      <li><a href="#" class="text-black dark:text-yellow-400 hover:underline">Examples</a></li>
    </ul>
  </div>
</nav>

Related Components

Brutalist_Dating_Navigation_Simple

A simple, brutalist-inspired navigation bar for a dating/social app, featuring high-contrast elements, warm neutrals, and full responsiveness with dark mode support.

Open

Navigation Component 43

A responsive navigation component following skeuomorphic design principles, featuring digital elements that mimic their real-world counterparts, with dark theme support.

Open

Navigation Components Component

A responsive navigation component with dark mode support using Tailwind CSS. It includes a logo, navigation links, and a call-to-action button.

Open