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

Bauhaus_Music_Breadcrumb

음악/오디오 플랫폼을 위한 Bauhaus에서 영감을 받은 간단한 이동 경로 탐색 구성 요소로, 코퍼레이트 블루 톤과 다크 모드 지원으로 완전한 응답성을 제공합니다.

미리 보기

HTML 코드 

<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
    <li class="inline-flex items-center">
      <a href="#"
        class="inline-flex items-center text-sm font-medium text-blue-800 hover:text-blue-950 dark:text-blue-300 dark:hover:text-white px-2 py-1 rounded-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-blue-300 dark:hover:border-blue-700"
        aria-current="page">
        <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 dark:text-blue-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-blue-800 hover:text-blue-950 dark:text-blue-300 dark:hover:text-white px-2 py-1 rounded-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 border border-transparent hover:border-blue-300 dark:hover:border-blue-700 md:ms-2">Artists</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 dark:text-blue-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-blue-900 dark:text-white px-2 py-1 rounded-sm md:ms-2">The Electroniks</span>
      </div>
    </li>
  </ol>
</nav>

관련 구성 요소

뉴모픽 스포츠 브레드크럼

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

열다

Breadcrumb Navigation 구성 요소

Tailwind CSS를 사용하여 만든 다크 모드를 지원하는 Neumorphism 스타일로 설계된 반응형 이동 경로 탐색 구성 요소입니다.

열다

Breadcrumb Navigation 구성 요소

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

열다