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

Sidebar Navigation 구성 요소

반응형 사이드바 탐색 구성 요소는 Tailwind CSS를 사용하여 어두운 테마를 지원하는 스큐어모픽 방식으로 스타일링되었습니다.

미리 보기

HTML 코드 

<div class="flex">
  <aside class="bg-gray-900 text-white w-64 h-screen shadow-lg rounded-r-3xl p-5">
    <div class="flex flex-col items-center mb-10">
      <img class="rounded-full border-4 border-gray-700" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" width="100" height="100" />
      <h2 class="mt-3 text-xl font-bold">John Doe</h2>
      <p class="text-gray-400">Web Developer</p>
    </div>
    <nav>
      <ul class="space-y-4">
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=1" alt="Icon" />
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=2" alt="Icon" />
            Profile
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=3" alt="Icon" />
            Settings
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=4" alt="Icon" />
            Help
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition duration-200">
            <img class="h-6 w-6 mr-3" src="https://picsum.photos/20/20?random=5" alt="Icon" />
            Logout
          </a>
        </li>
      </ul>
    </nav>
  </aside>
  <main class="flex-1 p-10 bg-gray-200">
    <h1 class="text-3xl font-bold">Main Content Area</h1>
    <p>This is where your main content goes.</p>
  </main>
</div>

관련 구성 요소

Sidebar Navigation 구성 요소

Brutalism 스타일로 설계된 반응형 사이드바 탐색 구성 요소로, 전자 상거래 애플리케이션에 적합합니다. 생생한 색상, 고대비, 다양한 쇼핑 카테고리에 대한 링크, 사용자 계정 옵션, 장바구니 액세스를 위한 생생한 클릭 유도문안 버튼을 포함한 여러 대화형 요소가 특징입니다. 디자인은 다크 모드에도 적용됩니다.

열다

레트로사이드바내비게이션

레트로/빈티지 스타일의 사이드바 탐색 구성 요소로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

열다

사이드바 탐색 구성 요소 - 멤피스 음소거

멤피스 디자인에서 영감을 받은 복잡하고 반응형이 빠른 사이드바 탐색 구성 요소로, 차분한 색 구성표가 적용되어 문서 및 Wiki 사이트에 적합합니다. 다크 모드 지원 및 대화형 요소가 포함되어 있습니다.

열다