CCHub Logo CCHub Tailwind Collection
구성 요소 고정 탐색 Sticky Navigation 구성 요소

Sticky Navigation 구성 요소

대시보드에 대한 Neumorphism 디자인, 보색 구성표, 적당한 복잡성 및 반응형 어두운 테마 지원을 제공하는 고정 탐색 구성 요소입니다. 이 디자인은 뉴모피즘(Neumorphism) 효과를 위해 부드러운 그림자를 통합하고 보색을 사용하여 시각적으로 매력적인 인터페이스를 만듭니다. 데이터 시각화 및 제어판을 제공하는 대시보드에 적합합니다.

미리 보기

HTML 코드 

<nav class="dark:bg-gray-800 dark:text-gray-200 bg-gray-200 text-gray-800 p-4 sticky top-0 z-50 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-2xl font-semibold">Dashboard</div>
    <ul class="flex space-x-6">
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Overview</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Analytics</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Reports</a></li>
      <li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Settings</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <img class="w-8 h-8 rounded-full"
        src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
      <button class="dark:text-gray-200 text-gray-800 focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M12 3v1m0 16v1m9-9h1M3 12H2m8.003-9.127a9.006 9.006 0 00-7.872 7.872m15.744 0A9.006 9.006 0 0112 21.003m-4.127-8.003a9.006 9.006 0 017.872-7.872m0 15.744a9.006 9.006 0 00-7.872-7.872"></path>
        </svg>
      </button>
    </div>
  </div>
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
    }
  </style>
</nav>

관련 구성 요소

Sticky Navigation 구성 요소

스큐어모픽 디자인, 트라이어딕 색 구성표 및 간단한 레이아웃을 갖춘 끈적한 탐색 구성 요소로 소셜 미디어 인터페이스에 적합합니다. 반응형 디자인과 어두운 테마를 지원합니다.

열다

Sticky Navigation 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 원칙에 따라 스타일링된 반응형 고정 탐색 구성 요소로, 어두운 테마를 특징으로 하며 임의의 자리 표시자 이미지와 아바타를 포함합니다.

열다

Brutalist Sticky Navigation 컴포넌트

브루탈리스트 스티키 네비게이션 바(Brutalist Sticky Navigation Bar) - 다크 모드를 지원하는 블로그를 위한 그레이스케일(Grayscale)

열다