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>

관련 구성 요소

Retro_Vintage_Corporate_Blue_Breadcrumb_Navigation

레트로/빈티지 미학을 가미한 간단하고 반응이 빠른 이동 경로 탐색 구성 요소로, 기업용 블루 톤을 사용하며 교육 플랫폼용으로 설계되었습니다. 다크 모드 지원이 포함됩니다.

열다

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

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

열다

Memphis_Rainbow_Breadcrumb_Navigation

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

열다