検索コンポーネント

カテゴリ

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

ブレッドクラムナビゲーション

ウェブサイト内のユーザーの位置情報のパスを表示します

Neon_Glow_Gaming_Breadcrumb

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

Playful Breadcrumb Navigation コンポーネント

教育プラットフォーム向けに設計された遊び心のある魅力的なパンくずリストナビゲーションコンポーネントで、明るい色、丸みを帯びた要素、読みやすい高コントラストが特徴です。ダークモードをサポートし、完全にレスポンシブです。

開けるプレビュー

                <nav class="flex justify-center px-4 py-3 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 shadow-xl rounded-b-3xl dark:from-gray-800 dark:via-gray-900 dark:to-black sm:px-6 md:px-8 lg:px-10 xl:px-12" 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-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
        <svg class="w-5 h-5 mr-1 sm:mr-2 flex-shrink-0" 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>
        <span class="font-semibold text-sm sm:text-base">Home</span>
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" 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="ml-1 sm:ml-2 text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
          <span class="font-medium text-sm sm:text-base">Courses</span>
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" 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="ml-1 sm:ml-2 text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
          <span class="font-medium text-sm sm:text-base">Web Development</span>
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" 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="ml-1 sm:ml-2 text-yellow-100 font-bold drop-shadow-lg text-sm sm:text-base dark:text-orange-400">
          Mastering Tailwind CSS
        </span>
      </div>
    </li>
  </ol>
</nav>

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

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

開けるプレビュー

                <nav class="bg-white px-4 py-3 border-b-4 border-black font-mono dark:bg-black dark:border-white sm:px-6 lg:px-8" aria-label="Breadcrumb">
  <ol role="list" class="flex flex-wrap items-center space-x-0.5 sm:space-x-1.5">
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 pr-1 dark:text-white dark:hover:text-red-500">
        Booking
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Select Service
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Choose Date & Time
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center group">
      <a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
        Confirm Details
      </a>
      <span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
    </li>
    <li class="flex items-center">
      <span class="text-red-500 uppercase text-sm font-extrabold tracking-widest px-1 dark:text-red-500" aria-current="page">
        Payment
      </span>
    </li>
  </ol>
</nav>

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

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

開けるプレビュー

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

Monospace_Developer_Breadcrumb_Navigation

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

開けるプレビュー

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-2 md:space-x-4 font-mono text-xs md:text-sm lg:text-base p-2 rounded-md
    bg-gray-100 dark:bg-gray-800
    text-gray-700 dark:text-gray-300
    border border-gray-300 dark:border-gray-700
    shadow-sm dark:shadow-md">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center
        text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
        transition-colors duration-200
        px-2 py-1 rounded-sm
        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <svg class="w-3 h-3 mr-1 md:mr-2" 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 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
          </path>
        </svg>
        _HOME
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md: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="
          text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
          transition-colors duration-200
          px-2 py-1 rounded-sm
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          _DOCS
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md: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="
          text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100
          transition-colors duration-200
          px-2 py-1 rounded-sm
          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          _GETTING_STARTED
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-3 h-3 text-gray-400 dark:text-gray-500 mx-1 md: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="
          text-blue-600 dark:text-blue-400
          font-bold
          px-2 py-1
          cursor-default">
          _INSTALLATION
        </span>
      </div>
    </li>
  </ol>
</nav>

Bauhaus_Music_Breadcrumb

バウハウスにインスパイアされた音楽/オーディオプラットフォーム向けのシンプルなパンくずリストナビゲーションコンポーネントで、企業のブルートーンとダークモードをサポートする完全な応答性が特徴です。

開けるプレビュー

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
    <li class="inline-flex items-center">
      <a href="#"
        class="inline-flex items-center text-sm font-medium text-blue-800 hover:text-blue-950 dark:text-blue-300 dark:hover:text-white px-2 py-1 rounded-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-blue-300 dark:hover:border-blue-700"
        aria-current="page">
        <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path
            d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
        </svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-blue-600 mx-1 dark:text-blue-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
          fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
        </svg>
        <a href="#"
          class="ms-1 text-sm font-medium text-blue-800 hover:text-blue-950 dark:text-blue-300 dark:hover:text-white px-2 py-1 rounded-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-blue-300 dark:hover:border-blue-700 md:ms-2">Artists</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-blue-600 mx-1 dark:text-blue-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
          fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
        </svg>
        <span class="ms-1 text-sm font-semibold text-blue-900 dark:text-white px-2 py-1 rounded-sm md:ms-2">The Electroniks</span>
      </div>
    </li>
  </ol>
</nav>

レトロ不動産パンくずリスト

秋の色を基調としたレトロ/ビンテージスタイルのシンプルでレスポンシブなパンくずリストナビゲーションコンポーネントで、ダークモードのサポートを含む不動産物件リストに適しています。

開けるプレビュー

                <nav class="flex justify-center py-4 px-2 sm:px-4 text-sm md:text-base bg-gradient-to-b from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-800" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-2 sm:space-x-4">
    <li class="inline-flex items-center">
      <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
        <svg class="w-4 h-4 mr-1 sm:mr-2 text-orange-700 dark:text-orange-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <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 aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
          Properties
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
          Houses
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <span class="text-stone-600 dark:text-stone-400 font-light font-serif tracking-wide pr-1 sm:pr-0">
          123 Vintage Lane
        </span>
      </div>
    </li>
  </ol>
</nav>