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

Breadcrumb Navigation 구성 요소

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

미리 보기

HTML 코드 

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

관련 구성 요소

Bauhaus_Music_Breadcrumb

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

열다

Breadcrumb Navigation 구성 요소

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

열다

Earth_Tones_Gradient_Breadcrumb_Navigation

뉴스/저널리즘 웹 사이트를 위해 설계된 복잡하고 반응이 빠른 이동 경로 탐색 구성 요소로, 흙빛 그라디언트 전환 및 완전한 다크 모드 지원을 제공합니다.

열다