Components Navigation Dashboard Navigation (Material Design)

Dashboard Navigation (Material Design)

Material Design Dashboard Navigation Component with Triadic color scheme and dark mode support.

Preview

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

Navigation Component

A simple navigation component designed for a blog with microinteractions and pastel color scheme. It features a responsive layout and dark theme support.

Open

3D_Triadic_Simple_Business_Navigation

A simple, responsive business navigation component with a 3D design aesthetic and a triadic color scheme, supporting dark mode.

Open

Retro E-commerce Navigation

Responsive navigation component with retro/vintage design, earth tones, and dark mode support for e-commerce.

Open