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>

관련 구성 요소

Breadcrumb Navigation 구성 요소

Breadcrumb Navigation Component with Skeuomorphism design, Monochromatic color scheme, and Simple complexity for Dashboard purpose, with dark theme

열다

Neumorphism Breadcrumb Navigation 구성 요소

Neumorphism Breadcrumb Navigation Component for Blog/Content with Dark Mode 지원

열다

Breadcrumb Navigation 구성 요소

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

열다