CCHub Logo CCHub Tailwind Collection
コンポーネント ブレッドクラムナビゲーション Eコマースパンくずナビゲーション - 紙/印刷インスパイアパープル

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

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

プレビュー

HTMLコード 

<nav class='bg-white dark:bg-gray-800 p-4 shadow-md sm:rounded-lg border border-gray-200 dark:border-gray-700 font-sans' aria-label='Breadcrumb'>
  <ol class='flex flex-wrap items-center space-x-2 sm:space-x-4'>
    <li>
      <a href='#' class='text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200 text-sm sm:text-base font-medium whitespace-nowrap'>
        Home
      </a>
    </li>
    <li class='flex items-center'>
      <svg class='flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-500 mx-1 sm:mx-2' fill='currentColor' viewBox='0 0 20 20' aria-hidden='true'>
        <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' />
      </svg>
      <a href='#' class='text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200 text-sm sm:text-base font-medium whitespace-nowrap'>
        Category
      </a>
    </li>
    <li class='flex items-center'>
      <svg class='flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-500 mx-1 sm:mx-2' fill='currentColor' viewBox='0 0 20 20' aria-hidden='true'>
        <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' />
      </svg>
      <a href='#' class='text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-300 transition-colors duration-200 text-sm sm:text-base font-medium whitespace-nowrap'>
        Subcategory
      </a>
    </li>
    <li class='flex items-center' aria-current='page'>
      <svg class='flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-gray-400 dark:text-gray-500 mx-1 sm:mx-2' fill='currentColor' viewBox='0 0 20 20' aria-hidden='true'>
        <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' />
      </svg>
      <span class='text-gray-500 dark:text-gray-400 text-sm sm:text-base font-semibold whitespace-nowrap'>Current Product Page</span>
    </li>
  </ol>
</nav>

関連コンポーネント

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

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

開ける

Playful Breadcrumb Navigation コンポーネント

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

開ける

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

ブルータリズムスタイルでデザインされたレスポンシブなパンくずナビゲーションコンポーネントで、ダッシュボードの鮮やかな配色で、ダークモードをサポートしています。

開ける