検索コンポーネント

カテゴリ

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

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

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

Earth_Tones_Gradient_Breadcrumb_Navigation

ニュース/ジャーナリズムのWebサイト向けに設計された、複雑で応答性の高いブレッドクラムナビゲーションコンポーネントで、アースグラデーショントランジションと完全なダークモードのサポートを特徴としています。

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse bg-gradient-to-r from-stone-100 via-stone-50 to-amber-50 dark:from-stone-800 dark:via-stone-700 dark:to-amber-950 p-2 sm:p-3 rounded-lg shadow-lg dark:shadow-stone-950/50 transition-all duration-300 ease-in-out">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-stone-700 hover:text-stone-900 dark:text-stone-300 dark:hover:text-white transition-colors duration-200">
        <svg class="w-4 h-4 me-2.5 text-amber-600 dark:text-amber-400 transition-colors duration-200" 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 class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-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-stone-700 hover:text-stone-900 md:ms-2 dark:text-stone-300 dark:hover:text-white transition-colors duration-200 group-hover:text-amber-700 dark:group-hover:text-amber-500">
          Categories
        </a>
      </div>
    </li>
    <li class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-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-stone-700 hover:text-stone-900 md:ms-2 dark:text-stone-300 dark:hover:text-white transition-colors duration-200 group-hover:text-amber-700 dark:group-hover:text-amber-500">
          Politics
        </a>
      </div>
    </li>
    <li aria-current="page" class="group">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-stone-500 mx-1 transition-colors duration-200 group-hover:text-amber-600 dark:text-stone-400 dark:group-hover:text-amber-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-amber-800 md:ms-2 dark:text-amber-300 transition-colors duration-200 group-hover:text-amber-900 dark:group-hover:text-amber-200">
          Current Affairs Article Title
        </span>
      </div>
    </li>
  </ol>
</nav>

Retro_Vintage_Corporate_Blue_Breadcrumb_Navigation

レトロ/ビンテージの美学を備えたシンプルで応答性の高いパンくずリストナビゲーションコンポーネントで、企業の青い色調を使用し、教育プラットフォーム向けに設計されています。ダークモードのサポートが含まれています。

開けるプレビュー

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse font-sans">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-blue-700 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200 uppercase tracking-widest">
        <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" 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-700 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200 uppercase tracking-widest">Courses</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" 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-medium text-blue-500 dark:text-blue-500 uppercase tracking-widest">Lesson 1</span>
      </div>
    </li>
  </ol>
</nav>

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

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

開けるプレビュー

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

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

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

開けるプレビュー

                <nav class="bg-gray-800 p-4 rounded-lg dark:bg-gray-900">
    <ol class="list-reset flex text-sm text-white">
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Home
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Dashboard
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="mr-2">
            <a href="#" class="text-blue-500 hover:text-blue-400 dark:text-blue-300 dark:hover:text-blue-200">
                Analytics
            </a>
            <span class="text-gray-600 dark:text-gray-400">/</span>
        </li>
        <li class="text-gray-600 dark:text-gray-400">Current Page</li>
    </ol>
</nav>

<div class="p-4 bg-gray-700 rounded-lg dark:bg-gray-800 mt-4">
    <h2 class="text-xl text-white font-bold">
        Breadcrumb Navigation in Brutalism Style
    </h2>
    <p class="text-gray-400 dark:text-gray-300">
        Use the breadcrumbs above to navigate through the dashboard.
    </p>
    <div class="mt-4">
        <img class="w-full h-40 object-cover rounded" src="https://picsum.photos/800/200" alt="Dashboard Image">
    </div>
    <div class="mt-4">
        <h3 class="text-lg text-white">Team Members</h3>
        <div class="flex space-x-4 mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
        </div>
    </div>
</div>

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

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

開けるプレビュー

                <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 Breadcrumb Navigation コンポーネント

Neumorphism Breadcrumb Navigation Component for Blog/Content with Dark Mode support(ダークモードをサポートするブログ/コンテンツ用)

開けるプレビュー

                <nav aria-label="Breadcrumb" class="flex">
  <ol role="list" class="flex items-center space-x-4">
    <li>
      <div>
        <a href="#" class="text-gray-400 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400">
          <svg class="h-5 w-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 011-1h2a1 1 0 011 1v3h1V9.414l-7-7a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Home</span>
        </a>
      </div>
    </li>

    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38l3.72-3.78a.75.75 0 00-1.06-1.06L10 8.38 6.28 4.6a.75.75 0 00-1.06 1.06L8.94 9.38l-3.72 3.78a.75.75 0 000 1.06z" />
        </svg>
        <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300">Projects</a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300 dark:text-gray-700" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5.22 14.22a.75.75 0 001.06 0L10 10.44l3.72 3.78a.75.75 0 101.06-1.06L11.06 9.38l3.72-3.78a.75.75 0 00-1.06-1.06L10 8.38 6.28 4.6a.75.75 0 00-1.06 1.06L8.94 9.38l-3.72 3.78a.75.75 0 000 1.06z" />
        </svg>
        <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300" aria-current="page">Project Nero</a>
      </div>
    </li>
  </ol>
</nav>

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

レトロ/ビンテージデザイン、鮮やかな配色、シンプルな複雑さのレベルを備えたブレッドクラムナビゲーションコンポーネント、ブログ/コンテンツの目的。

開けるプレビュー

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a href="#" class="text-sm font-medium text-purple-700 hover:text-purple-900 dark:text-purple-400 dark:hover:text-white">
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 text-purple-500" 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 10l-3.293-3.293a1 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 text-sm font-medium text-purple-700 hover:text-purple-900 md:ml-2 dark:text-purple-400 dark:hover:text-white">Articles</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-4 h-4 text-purple-500" 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 10l-3.293-3.293a1 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 text-sm font-medium text-purple-500 md:ml-2 dark:text-gray-500">This Article</span>
      </div>
    </li>
  </ol>
</nav>

Glassmorphism ブレッドクラム

ダークモードによるレスポンシブGlassmorphismブレッドクラムナビゲーション。

開けるプレビュー

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
        <svg class="w-3 h-3 mr-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="w-3 h-3 mx-1 text-gray-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="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-3 h-3 mx-1 text-gray-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="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Flowbite</span>
      </div>
    </li>
  </ol>
</nav>

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

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

開けるプレビュー

                <nav class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
  <ol class="list-none flex space-x-4">
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/" class="hover:text-blue-600 dark:hover:text-blue-300">Home</a>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <span>/</span>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/category" class="hover:text-blue-600 dark:hover:text-blue-300">Category</a>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <span>/</span>
    </li>
    <li class="text-gray-700 dark:text-gray-300">
      <a href="/category/post" class="hover:text-blue-600 dark:hover:text-blue-300">Post Title</a>
    </li>
  </ol>
</nav>

<div class="mt-4 space-y-2">
  <div class="flex items-center space-x-2">
    <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
    <span class="text-gray-800 dark:text-gray-200">Author Name</span>
  </div>
  <p class="text-gray-600 dark:text-gray-400">
    This is a brief description meant for content consumption. It should be concise and engaging.
  </p>
</div>

<div class="flex items-center mt-4">
  <img class="h-32 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Blog Post Image">
</div>

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

Glassmorphismスタイルとアースカラーの色で設計されたレスポンシブなブレッドクラムナビゲーションコンポーネントは、プロの企業のWebサイトに最適です。ダークテーマをサポートし、ナビゲーション用のインタラクティブ機能が含まれています。

開けるプレビュー

                <nav class="bg-opacity-50 backdrop-blur-lg bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg">
    <ol class="list-reset flex items-center space-x-4 text-gray-600 dark:text-gray-300">
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Home</a>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-500">/</span>
        </li>
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Services</a>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-500">/</span>
        </li>
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Consulting</a>
        </li>
    </ol>
</nav>

<!-- Example of how to display user avatars or images in a Breadcrumb if needed -->
<div class="flex items-center space-x-3 mt-4">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
    <span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>