구성 요소 이동 경로 탐색 Memphis_Rainbow_Breadcrumb_Navigation

Memphis_Rainbow_Breadcrumb_Navigation

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

미리 보기

HTML 코드

<nav class="flex justify-center py-4 px-2 sm:px-4 md:px-6 lg:px-8 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-900 dark:to-black" aria-label="Breadcrumb">
  <ol class="flex items-center space-x-2 sm:space-x-4">
    <li>
      <div class="flex items-center">
        <a href="#" class="text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group">
          <svg class="flex-shrink-0 h-4 w-4 sm:h-5 sm:w-5 text-white group-hover:text-yellow-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-9a1 1 0 00-1-1H9a1 1 0 00-1 1v9h3m-3 1h6" />
          </svg>
          <span class="sr-only">Home</span>
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 transform rotate-45" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path d="M5.293 15.707a1 1 0 010-1.414L9.586 10 5.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <a href="#" class="ml-2 sm:ml-4 text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group">
          Blog
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
        </a>
      </div>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="flex-shrink-0 w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 transform rotate-45" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path d="M5.293 15.707a1 1 0 010-1.414L9.586 10 5.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
        <a href="#" class="ml-2 sm:ml-4 text-white hover:text-yellow-200 transition duration-300 ease-in-out font-bold text-sm sm:text-base tracking-wider relative group" aria-current="page">
          Latest Articles
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-yellow-200 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out origin-left"></span>
        </a>
      </div>
    </li>
  </ol>
</nav>

관련 구성 요소

브루탈리스트 이동 경로 탐색

예약/예약 시스템을 위한 브루탈리즘에서 영감을 받은 이동 경로 탐색 구성 요소로, 고대비, 밝은 액센트 색상의 흑백, 다크 모드 지원으로 완전한 응답성을 제공합니다. 각 단계는 대담한 타이포그래피와 고유한 구분 기호로 명확하게 묘사됩니다.

열다

Breadcrumb Navigation 구성 요소

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

열다

뉴모픽 스포츠 브레드크럼

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

열다