Dashboard Navigation (Material Design)
Material Design Dashboard Navigation Component with Triadic color scheme and dark mode support.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow">
<div class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div class="text-gray-800 dark:text-white font-bold text-xl">Dashboard</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-teal-500 dark:hover:text-teal-400 transition duration-300">Analytics</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-red-500 dark:hover:text-red-400 transition duration-300">Settings</a>
</div>
</div>
</div>
</nav>
Related Components
Retro Navigation Component
A retro-styled navigation component with vintage aesthetics from the 80s/90s, featuring responsive design and dark theme support using Tailwind CSS.
Responsive Navigation Component
Responsive Navigation Component with Microinteractions, Grayscale color scheme, and Simple complexity.
3D Navigation Component
A responsive 3D navigation component designed with Tailwind CSS, featuring dark theme support and engaging three-dimensional elements.