CCHub Logo CCHub Tailwind Collection
구성 요소 사이드바 탐색 Sidebar Navigation 구성 요소

Sidebar Navigation 구성 요소

대시보드를 위해 설계된 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, 매력적인 애니메이션과 흙빛 색 구성표를 특징으로 합니다. 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-lg transition-transform duration-300 ease-in-out">
    <div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700 bg-green-600 dark:bg-green-800">
        <h1 class="text-xl text-white font-bold">Dashboard</h1>
    </div>
    <nav class="flex-1 p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic1/30/30" alt="Image 1" class="w-8 h-8 rounded-full mr-2">
                    <span>Reports</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded transition-all duration-300 ease-in-out">
                    <img src="https://picsum.photos/seed/pic2/30/30" alt="Image 2" class="w-8 h-8 rounded-full mr-2">
                    <span>Settings</span>
                </a>
            </li>
        </ul>
    </nav>
    <div class="p-4 border-t border-gray-300 dark:border-gray-700">
        <a href="#" class="block text-center text-gray-700 dark:text-gray-300 hover:bg-green-500 dark:hover:bg-green-700 rounded p-2 transition-all duration-300 ease-in-out">Logout</a>
    </div>
</div>

관련 구성 요소

사이드바 탐색

반응형 사이드바 탐색 구성 요소에는 아날로그 색 구성표와 어두운 테마 지원을 포함한 마이크로 인터랙션이 있습니다.

열다

Sidebar Navigation 구성 요소

산업 디자인 스타일, 따뜻한 중성 색 구성표 및 다크 모드 지원을 갖춘 간단하고 반응이 빠른 사이드바 탐색 구성 요소로, 암호화폐/블록체인 애플리케이션에 적합합니다.

열다

Sidebar Navigation 구성 요소

소셜 미디어 응용 프로그램을 위한 간단하고 반응이 빠른 사이드바 탐색으로, 유사한 색 구성표로 어두운 모드에 최적화되어 있습니다. 여기에는 아바타와 사용자 이름이 있는 프로필 섹션과 탐색 링크가 포함됩니다. 이 디자인은 스타일링과 응답성을 위해 Tailwind CSS를 사용하며 Tailwind의 내장 dark: 접두사를 통해 다크 모드를 지원합니다.

열다