コンポーネント ブレッドクラムナビゲーション ニューモルフィックスポーツブレッドクラム

ニューモルフィックスポーツブレッドクラム

スポーツ/フィットネスアプリケーション向けに設計された複雑でニューモーフィックなパンくずリストナビゲーションコンポーネントで、豊かなジュエルトーンとダークモードサポートによる完全な応答性が特徴です。

プレビュー

HTMLコード

<nav class="flex items-center justify-center p-4 bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-gray-800 dark:to-gray-950 min-h-24 md:min-h-32 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center space-x-2 sm:space-x-4">
    <li>
      <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-700 dark:focus:ring-emerald-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark">
        <svg class="w-4 h-4 mr-1 sm:mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
        Home
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-emerald-600 dark:text-emerald-400 mx-1 sm:mx-2" 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>
      <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-700 dark:focus:ring-emerald-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark group-hover:block">
        <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Team Avatar" class="w-5 h-5 sm:w-6 sm:h-6 rounded-full mr-1 object-cover shadow-md">
        Athletics
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-emerald-600 dark:text-emerald-400 mx-1 sm:mx-2" 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>
      <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-sapphire-700 dark:focus:ring-sapphire-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark">
        <svg class="w-4 h-4 mr-1 sm:mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.472 2.72L14.75 5.442S13.435 7.15 11.25 7.203c-2.185.053-4.22-.924-4.22-.924S5.105 5.56 5.105 5.56L2.38 2.76A1 1 0 00.91 3.94l2.72 2.72c.983.983 2.87.983 2.87.983s-1.84.455-2.61.026a1 1 0 00-1.378 1.464l.6.6a1 1 0 001.4-.04c.77-.43 2.76 1.48 2.76 1.48s1.603 1.15 2.8 1.15c.57 0 1.1-.115 1.57-.31L16.06 17.5a1 1 0 001.41-1.41L11.53 10.74c.2-.47.31-1 .31-1.57 0-1.2-.4-2.22-1.15-2.8l1.48-1.48c.04.04.08.08.12.11l2.76 2.76a1 1 0 001.41-1.41l-2.72-2.72c-.983-.983-.983-2.87-.983-2.87s.455 1.84.026 2.61a1 1 0 001.464 1.378l.6-.6a1 1 0 00-.04-1.4C16.92 4.69 17.472 2.72 17.472 2.72zM15 6a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        Teams
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-sapphire-600 dark:text-sapphire-400 mx-1 sm:mx-2" 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>
      <span class="flex items-center text-ruby-700 dark:text-ruby-300 px-3 py-1 text-sm sm:text-base font-bold cursor-default shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark rounded-full">
        <img src="https://picsum.photos/id/1018/25/25" alt="Team Logo" class="w-5 h-5 sm:w-6 sm:h-6 rounded-full mr-1 object-cover shadow-md">
        Griffins Squad
      </span>
    </li>
  </ol>
</nav>

<style>
  /* Base light mode shadows */
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #bfd6d0, inset -5px -5px 10px #ffffff;
  }

  .shadow-outer-neumorphic-light {
    box-shadow: 5px 5px 10px #bfd6d0, -5px -5px 10px #ffffff;
  }

  /* Base dark mode shadows */
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #4a5568;
  }

  .dark .shadow-outer-neumorphic-dark {
    box-shadow: 5px 5px 10px #1a202c, -5px -5px 10px #4a5568;
  }

  /* Jewel Tone Theme Colors (Examples - extend as needed in tailwind.config.js) */
  .text-emerald-700 { color: #047857; }
  .dark .text-emerald-300 { color: #6ee7b7; }
  .hover\:text-emerald-900:hover { color: #064e3b; }
  .dark .hover\:text-emerald-100:hover { color: #ecfdf5; }

  .focus\:ring-emerald-700:focus { --tw-ring-color: #047857; }
  .dark .focus\:ring-emerald-300:focus { --tw-ring-color: #6ee7b7; }

  .text-emerald-600 { color: #059669; }
  .dark .text-emerald-400 { color: #34d399; }

  .text-sapphire-700 { color: #1d4ed8; }
  .dark .text-sapphire-300 { color: #93c5fd; }
  .hover\:text-sapphire-900:hover { color: #1e3a8a; }
  .dark .hover\:text-sapphire-100:hover { color: #eff6ff; }

  .focus\:ring-sapphire-700:focus { --tw-ring-color: #1d4ed8; }
  .dark .focus\:ring-sapphire-300:focus { --tw-ring-color: #93c5fd; }

  .text-sapphire-600 { color: #2563eb; }
  .dark .text-sapphire-400 { color: #60a5fa; }

  .text-ruby-700 { color: #b91c1c; }
  .dark .text-ruby-300 { color: #fca5a5; }

  /* Background gradient Adjustments */
  .from-emerald-50 { background-image: linear-gradient(to bottom right, #effdf5, var(--tw-gradient-to, #d1fae5)); /* Tailwind default */}
  .to-teal-100 { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #f0fdf4), #ccfbf1); /* Tailwind default */}

  .dark .from-gray-800 { background-image: linear-gradient(to bottom right, #2d3748, var(--tw-gradient-to, #2c313a)); /* Tailwind default */}
  .dark .to-gray-950 { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #1a202c), #0f172a); /* Tailwind default */}

  /* Note: For full control and proper dark mode color overriding, define custom color palettes in tailwind.config.js */
  /* Example tailwind.config.js extension */
  /*
  module.exports = {
    darkMode: 'class',
    theme: {
      extend: {
        colors: {
          emerald: {
            50: '#effdf5',
            100: '#d1fae5',
            300: '#6ee7b7',
            400: '#34d399',
            600: '#059669',
            700: '#047857',
            800: '#065f46',
            900: '#064e3b'
          },
          sapphire: {
            50: '#eff6ff',
            100: '#dbeafe',
            300: '#93c5fd',
            400: '#60a5fa',
            600: '#2563eb',
            700: '#1d4ed8',
            800: '#1e40af',
            900: '#1e3a8a'
          },
          ruby: {
            50: '#fef2f2',
            100: '#fee2e2',
            300: '#fca5a5',
            400: '#ef4444',
            600: '#dc2626',
            700: '#b91c1c',
            800: '#991b1b',
            900: '#7f1d1d'
          }
        },
        boxShadow: {
          'inner-neumorphic-light': 'inset 5px 5px 10px #bfd6d0, inset -5px -5px 10px #ffffff',
          'outer-neumorphic-light': '5px 5px 10px #bfd6d0, -5px -5px 10px #ffffff',
          'inner-neumorphic-dark': 'inset 5px 5px 10px #1a202c, inset -5px -5px 10px #4a5568',
          'outer-neumorphic-dark': '5px 5px 10px #1a202c, -5px -5px 10px #4a5568'
        }
      }
    }
  }
  */
</style>

関連コンポーネント

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

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

開ける

Eコマースパンくずナビゲーション - 紙/印刷インスパイアパープル

eコマース用に設計されたシンプルでレスポンシブなパンくずリストナビゲーションコンポーネントで、紙/印刷物にインスパイアされた美学と紫/紫の配色が特徴です。ダークモードのサポートが含まれています。

開ける

Monospace_Developer_Breadcrumb_Navigation

モノスペース/開発者の美学とレトロ/ビンテージの配色を備えたレスポンシブなパンくずナビゲーションコンポーネントで、ドキュメントやウィキサイト向けに設計されています。ダークモードのサポートが含まれています。

開ける