구성 요소 이동 경로 탐색 Breadcrumb Navigation 구성 요소

Breadcrumb Navigation 구성 요소

Glassmorphism 스타일과 어스 톤 색상으로 설계된 반응형 이동 경로 탐색 구성 요소는 전문 회사 웹 사이트에 적합합니다. 어두운 테마를 지원하며 탐색을 위한 대화형 기능이 포함되어 있습니다.

미리 보기

HTML 코드

<nav class="bg-opacity-50 backdrop-blur-lg bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg">
    <ol class="list-reset flex items-center space-x-4 text-gray-600 dark:text-gray-300">
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Home</a>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-500">/</span>
        </li>
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Services</a>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-500">/</span>
        </li>
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Consulting</a>
        </li>
    </ol>
</nav>

<!-- Example of how to display user avatars or images in a Breadcrumb if needed -->
<div class="flex items-center space-x-3 mt-4">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
    <span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>

Breadcrumb Navigation 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Glassmorphism 이동 경로

Breadcrumb Navigation 구성 요소

Breadcrumb Navigation 구성 요소