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

仪表板导航(材料设计)

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>

相关组件

Material Design 导航组件

一个简单、响应式的 Material Design 导航组件,适用于使用灰度配色方案的社交媒体界面。具有带有徽标、导航链接、搜索栏和用户头像的简洁布局。包括使用 Tailwind 的 dark: 前缀的深色模式支持。

打开

复古仪表板导航组件

Retro/Vintage Dashboard 导航组件,具有鲜艳的色彩、适中的复杂性、响应能力和深色主题支持。

打开

导航组件

为深色模式UI设计的响应式导航组件,具有链接、下拉菜单和徽标,均采用Tailwind CSS样式。

打开