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

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

パステルカラーの配色とダークテーマのサポートを備えたNeumorphismデザインスタイルを利用したレスポンシブなBreadcrumb Navigationコンポーネントは、Tailwind CSSを使用して構築されています。

プレビュー

HTMLコード 

<nav class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg dark:shadow-sm transition duration-300">
  <ol class="list-reset flex">
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Category</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Subcategory</a>
      <svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
      </svg>
    </li>
    <li>
      <a href="#" class="text-blue-600 dark:text-blue-400 font-bold hover:underline">Current Page</a>
    </li>
  </ol>
</nav>

<!-- Example of how you can use it within a blog content -->
<div class="mt-4 dark:bg-gray-800 rounded-lg p-4 overflow-hidden shadow-lg">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h1>
  <p class="text-gray-600 dark:text-gray-400 mt-2">This is a paragraph of content where the blog post starts. It should be engaging and informative to keep readers on the page.</p>
  <div class="mt-4 flex items-center">
    <img src="https://randomuser.me/api/portraits/men/25.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
    <span class="ml-2 text-gray-700 dark:text-gray-300">Author Name</span>
  </div>
</div>

関連コンポーネント

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

Neumorphism スタイルで設計され、ダーク モードをサポートするレスポンシブなブレッドクラム ナビゲーション コンポーネントで、Tailwind CSS を使用して作成されました。

開ける

Playful Breadcrumb Navigation コンポーネント

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

開ける

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

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

開ける