구성 요소 이동 경로 탐색 Neumorphism Breadcrumb Navigation 구성 요소

Neumorphism Breadcrumb Navigation 구성 요소

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

미리 보기

HTML 코드

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

관련 구성 요소

Breadcrumb Navigation 구성 요소

Glassmorphism 스타일과 어스 톤 색상으로 설계된 반응형 이동 경로 탐색 구성 요소는 전문 회사 웹 사이트에 적합합니다. 어두운 테마를 지원하며 탐색을 위한 대화형 기능이 포함되어 있습니다.

열다

Breadcrumb Navigation 구성 요소

Material Design 및 Tailwind CSS로 스타일링된 반응형 이동 경로 탐색 구성 요소로, 어두운 테마 지원과 트라이어딕 색 구성표가 특징입니다.

열다

Breadcrumb Navigation 구성 요소

반응형 이동 경로 탐색 구성 요소는 대시보드를 위한 생생한 색 구성표와 함께 브루탈리즘 스타일로 설계되었으며 다크 모드를 지원합니다.

열다