コンポーネント航法ダッシュボードナビゲーション(マテリアルデザイン)

ダッシュボードナビゲーション(マテリアルデザイン)

マテリアルデザインダッシュボードナビゲーションコンポーネントで、トライアドカラースキームとダークモードがサポートされています。

プレビュー

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>

関連コンポーネント

ナビゲーションコンポーネント

ダークモードUI用に設計されたレスポンシブナビゲーションコンポーネントで、リンク、ドロップダウン、ロゴがあり、すべてTailwind CSSでスタイル設定されています。

開ける

レトロなビンテージナビゲーションコンポーネント

80年代/90年代のスタイルにインスパイアされたレトロ/ヴィンテージの美学でデザインされたレスポンシブナビゲーションコンポーネントで、パステルカラーの配色が特徴です。ダークモードのサポートを含むソーシャルメディアインターフェースに適しています。

開ける

ラグジュアリーナビゲーションコンポーネント

ファッションおよび美容ブランド向けのエレガントで応答性の高いナビゲーションコンポーネントで、明るいアクセントカラー、ダークモードのサポート、最小限の要素を備えた洗練された黒と白のデザインが特徴です。

開ける