카테고리

구성 요소 이동 경로 탐색

이동 경로 탐색

웹 사이트 내에서 사용자의 위치 경로를 표시합니다.

Brutalist Breadcrumb Navigation 구성 요소

생생한 색 구성표와 복잡한 레이아웃이 있는 포트폴리오를 위한 Brutalist Breadcrumb Navigation Component는 반응형 디자인과 다크 모드 지원을 특징으로 합니다.

                <nav class="text-sm font-mono">
  <ol class="list-none p-0 inline-flex">
    <li class="flex items-center">
      <a href="#" class="text-blue-500 dark:text-teal- गलती this looks like a typo, will fix to something like: dark:text-teal-300 hover:underline">Home</a>
      <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
    </li>
    <li class="flex items-center">
      <a href="#" class="text-blue-500 dark:text-teal-300 hover:underline">Projects</a>
      <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 67.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
    </li>
    <li>
      <span class="text-purple-700 dark:text-pink-400 font-bold">Current Project</span>
    </li>
  </ol>
</nav>

Breadcrumb Navigation 구성 요소

Breadcrumb Navigation Component는 Skeuomorphism 디자인, 반응형 효과 및 어두운 테마를 지원합니다.

미리보기 열기

                <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">
          <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 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-1-1l7-7z" 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" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
          <path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
        </svg>
        <a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Projects</a>
      </div>
    </li>
    
    <li>
      <div class="flex items-center">
        <svg class="h-5 w-5 flex-shrink-0 text-gray-300" fill="currentColor" viewBox="0 0 24 44" preserveAspectRatio="none" aria-hidden="true">
          <path d="M.293 0H.026L9.32 18.316c-.387-.85-.695-1.774-.95-2.738L0 0z" />
        </svg>
        <a href="#" aria-current="page" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Project Nero</a>
      </div>
    </li>
  </ol>
</nav>

Breadcrumb Navigation 구성 요소

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

미리보기 열기

                <nav class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 mb-6 max-w-4xl mx-auto">
    <ol class="list-reset flex text-gray-700 dark:text-gray-300">
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Home</a>
        </li>
        <li>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Library</a>
        </li>
        <li>
            <span class="mx-2">/</span>
        </li>
        <li>
            <a href="#" class="text-blue-500 hover:text-blue-700">Data</a>
        </li>
    </ol>
</nav>

<style>
    /* Neumorphism styles */
    nav {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
                    -8px -8px 15px rgba(255, 255, 255, 0.7);
    }
    nav.dark {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.5),
                    -8px -8px 15px rgba(0, 0, 0, 0.2);
    }
</style>

Breadcrumb Navigation 구성 요소

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

미리보기 열기

                <nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 mx-4">
    <ol class="list-reset flex items-center space-x-2">
        <li>
            <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
                Home
            </a>
            <svg class="w-4 h-4 text-gray-400 dark:text-gray-600" 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="M5 12h14m-7 7l7-7-7-7" /></svg>
        </li>
        <li>
            <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-300 transition duration-300">
                Category
            </a>
            <svg class="w-4 h-4 text-gray-400 dark:text-gray-600" 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="M5 12h14m-7 7l7-7-7-7" /></svg>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-600">
                Sub-category
            </span>
        </li>
    </ol>
</nav>

<style>
    /* Neumorphism Styling */
    .bg-white {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1), -10px -10px 20px rgba(255, 255, 255, 0.7);
    }
    .dark .bg-gray-800 {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(0, 0, 0, 0.7);
    }
    a {
        transition: all 0.3s ease;
    }
</style>

Breadcrumb Navigation 구성 요소

다크 모드를 지원하는 Tailwind CSS 이동 경로 탐색 구성 요소.

미리보기 열기

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <span class="ml-1 text-sm font-medium text-gray-400 md:ml-2 dark:text-gray-500">Flowbite</span>
      </div>
    </li>
  </ol>
</nav>

Breadcrumb Navigation 구성 요소

glassmorphism 디자인 스타일과 함께 Tailwind CSS를 사용하는 반응형 이동 경로 탐색 구성 요소입니다. 흐릿한 유리 같은 배경이 특징이며, 어두운 테마를 지원하고, 자리 표시자 이미지를 포함합니다.

미리보기 열기

                <div class="bg-white bg-opacity-30 backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-30 rounded-lg p-4 mb-6">
    <nav class="flex" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">
                    <img src="https://picsum.photos/20/20?random=1" alt="Home" class="w-5 h-5 rounded-full mr-2">
                    Home
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Category</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-400">Subcategory</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 3a1 1 0 01.707 1.707L5.414 10l5.293 5.293a1 1 0 01-1.414 1.414l-6-6a1 1 0 010-1.414l6-6A1 1 0 0110 3z" clip-rule="evenodd" />
                    </svg>
                    <span class="ml-1 text-sm font-medium text-gray-700 dark:text-gray-200">Current Page</span>
                </div>
            </li>
        </ol>
    </nav>
</div>