CCHub Logo CCHub Tailwind Collection
구성 요소 이동 경로 탐색 Breadcrumb Navigation 구성 요소

Breadcrumb Navigation 구성 요소

미니멀한 플랫 스타일로 디자인된 반응형 이동 경로 탐색 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 쉬운 탐색을 위한 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

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

관련 구성 요소

Retro_Vintage_Corporate_Blue_Breadcrumb_Navigation

레트로/빈티지 미학을 가미한 간단하고 반응이 빠른 이동 경로 탐색 구성 요소로, 기업용 블루 톤을 사용하며 교육 플랫폼용으로 설계되었습니다. 다크 모드 지원이 포함됩니다.

열다

Playful Breadcrumb Navigation 구성 요소

교육용 플랫폼용으로 설계된 재미있고 매력적인 이동 경로 탐색 구성 요소로, 밝은 색상, 둥근 요소, 높은 대비로 쉽게 읽을 수 있습니다. 다크 모드를 지원하며 완벽하게 반응합니다.

열다

Breadcrumb Navigation 구성 요소

블로그/콘텐츠 목적을 위한 레트로/빈티지 디자인, 생생한 색 구성표 및 단순 복잡성 수준을 갖춘 이동 경로 탐색 구성 요소.

열다