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>

관련 구성 요소

Breadcrumb Navigation 구성 요소

머티리얼 디자인에서 영감을 받은 이동 경로 탐색 구성 요소(Breadcrumb Navigation Component)는 그레이스케일 색 구성표와 복잡한 상호 작용을 사용하여 대시보드에 사용되며, 응답성 및 어두운 테마 지원을 위해 Tailwind CSS로 구현됩니다.

열다

Neumorphism Breadcrumb Navigation 구성 요소

Neumorphism Breadcrumb Navigation Component for Blog/Content with Dark Mode 지원

열다

Breadcrumb Navigation 구성 요소

Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 이동 경로 탐색 구성 요소이며 어두운 테마를 지원합니다.

열다