Brutalist Sticky Navigation
A Brutalist-style sticky navigation component with responsive behavior and dark mode support using Tailwind CSS. Features high contrast, bold typography, and a stark, raw aesthetic.
HTML Code
<header class="bg-yellow-400 text-black sticky top-0 z-50 border-b-4 border-black dark:bg-purple-800 dark:text-white dark:border-white">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-bold uppercase tracking-tighter">Brutal Nav</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-black hover:underline dark:text-white">Home</a>
<a href="#" class="text-black hover:underline dark:text-white">About</a>
<a href="#" class="text-black hover:underline dark:text-white">Services</a>
<a href="#" class="text-black hover:underline dark:text-white">Contact</a>
</div>
<button class="md:hidden text-black dark:text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path></svg>
</button>
</nav>
</header>Related Components
Sticky Navigation Component
A responsive sticky navigation bar that follows Material Design guidelines, featuring a dark mode.
Sticky Navigation Component
A sticky navigation component designed for dark mode with responsive effects using Tailwind CSS.
Sticky Navigation Component
A complex, skeuomorphic sticky navigation bar with vibrant colors, designed for social media interfaces. Includes responsive design and dark mode support using Tailwind CSS. Features profile image, search bar, notifications, and messaging icons.