组件 导航 仪表板导航(材料设计)

仪表板导航(材料设计)

Material Design 仪表板导航组件,具有三元配色方案和深色模式支持。

预览

HTML 代码

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

相关组件

复古导航

一个简单、响应式且兼容暗黑模式的导航组件,采用复古/古典设计,色彩鲜艳,元素简约,适合电子商务网站。

打开

拟物化导航组件

一个采用拟物化风格设计的导航组件,具有生动的色彩和适合博客内容的响应式布局。它包含交互特性,如悬停效果,且针对暗模式进行了优化。

打开

Monospace Healthcare 导航

一个复杂的响应式导航组件,适用于医疗保健/医疗应用程序,采用等宽层/开发人员风格的设计,带有温暖的中性色、深色模式支持和交互式元素。

打开