CCHub Logo CCHub Tailwind Collection
コンポーネント ブレッドクラムナビゲーション Neon_Glow_Gaming_Breadcrumb

Neon_Glow_Gaming_Breadcrumb

ゲーム Web サイト向けに設計された複雑でレスポンシブなブレッドクラム ナビゲーション コンポーネントで、黒と白のベースと鮮やかなアクセント カラーのネオン/グロー効果が特徴です。ダークモードのサポートとセマンティックHTMLが含まれています。

プレビュー

HTMLコード 

<nav class="bg-black text-white py-4 px-6 sm:px-8 lg:px-12 dark:bg-gray-950" aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center space-x-2 sm:space-x-4 text-sm sm:text-base font-semibold">
    <li class="flex items-center group">
      <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 001 1h3M14 4v7h-6V4m6 0H9m7 0-.55-.55z"></path></svg>
        Home
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
    </li>

    <li class="flex items-center group">
      <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 4h2a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2m4-2v4m0-4h.01M16 4h-4m-4 0H8m0 0v4m0-4h.01L14 10l-2 2h-4l-2 2h-4v4h16V6"></path></svg>
        Games
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
    </li>

    <li class="flex items-center group">
      <a href="#" class="text-gray-400 hover:text-cyan-400 transition-all duration-300 relative group-hover:drop-shadow-[0_0_8px_rgba(0,255,255,0.7)]">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 group-hover:animate-spin-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
        Genre: Action
      </a>
      <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-600 dark:text-gray-700 ml-2 sm:ml-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
    </li>

    <li class="flex items-center">
      <span class="text-cyan-400 drop-shadow-[0_0_8px_rgba(0,255,255,0.7)] relative transition-all duration-300">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-1 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 14.93L12 21.05l9.08-6.12A12.01 12.01 0 0021.08 6.982z"></path></svg>
        Cyberpunk 2077
      </span>
    </li>
  </ol>
</nav>
<style>
  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .animate-spin-slow {
    animation: spin-slow 5s linear infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 5px rgba(0,255,255,0.5); }
    50% { opacity: 0.7; text-shadow: 0 0 15px rgba(0,255,255,1); }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .group-hover\:animate-bounce:hover {
    animation: bounce 0.6s infinite;
  }

  /* Dark mode specific glows */
  .dark .group-hover\:drop-shadow-\[0_0_8px_rgba\(0\,255\,255\,0\.7\)\]:hover {
    filter: drop-shadow(0 0 10px rgba(0,255,255,0.9));
  }
  .dark .text-cyan-400.drop-shadow-\[0_0_8px_rgba\(0\,255\,255\,0\.7\)\] {
    filter: drop-shadow(0 0 10px rgba(0,255,255,0.9));
  }
</style>

関連コンポーネント

ブレッドクラムナビゲーションコンポーネント

Skeuomorphism デザイン、単色の配色、ダッシュボード用のシンプルな複雑さを備えたブレッドクラム ナビゲーション コンポーネント、ダーク テーマ

開ける

ブレッドクラムナビゲーションコンポーネント

ミニマリストのフラットスタイルで設計されたレスポンシブなパンくずリストナビゲーションコンポーネントで、ブログやコンテンツの消費に適しています。ナビゲーションを容易にするためのインタラクティブな要素が含まれており、ダークモードをサポートしています。

開ける

ブルータリストのパンくずリストナビゲーション

ブルータリズムにインスパイアされたブレッドクラムナビゲーションコンポーネントで、ブッキング/予約システム用で、ハイコントラスト、明るいアクセントカラーの黒と白、ダークモードのサポートによる完全な応答性が特徴です。各ステップは、大胆なタイポグラフィとユニークなセパレーターで明確に描かれています。

開ける