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

Breadcrumb Navigation 구성 요소

Tailwind CSS를 사용하여 구축된 파스텔 색 구성표 및 어두운 테마 지원과 함께 Neumorphism 디자인 스타일을 활용하는 반응형 이동 경로 탐색 구성 요소입니다.

미리 보기

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>

관련 구성 요소

Breadcrumb Navigation 구성 요소

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

열다

Memphis_Rainbow_Breadcrumb_Navigation

블로그/콘텐츠 사이트에 적합한 다색 무지개 그라데이션을 특징으로 하는 대담한 Memphis Design 미학을 갖춘 간단하고 반응이 빠른 이동 경로 탐색 구성 요소입니다. 다크 모드 지원이 포함됩니다.

열다

뉴모픽 스포츠 브레드크럼

스포츠/피트니스 애플리케이션용으로 설계된 복잡한 뉴모픽 이동 경로 탐색 구성 요소로, 풍부한 보석 톤과 다크 모드 지원으로 완전한 응답성을 특징으로 합니다.

열다