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

Sticky Navigation 구성 요소

단순하고 깔끔하며 대비가 높은 고정 탐색 모음으로, 고정 공간/개발자 미학을 가지며, 엔터테인먼트 또는 미디어 플랫폼에 적합합니다.

미리 보기

HTML 코드 

<nav class="bg-gray-900 dark:bg-black text-lime-400 font-mono fixed w-full top-0 z-50 shadow-lg">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <svg class="h-6 w-6 text-lime-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M4 8h16M4 16h16" />
      </svg>
      <span class="text-xl font-bold uppercase tracking-wider">CodeStream</span>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-8">
      <a href="#" class="hover:text-white transition duration-300">Discover</a>
      <a href="#" class="hover:text-white transition duration-300">Browse</a>
      <a href="#" class="hover:text-white transition duration-300">Live</a>
      <a href="#" class="hover:text-white transition duration-300">Community</a>
    </div>

    <!-- Mobile Menu Button (Hamburger Icon) -->
    <div class="md:hidden">
      <button class="text-lime-400 focus:outline-none focus:text-white">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation (hidden by default, would be toggled by JS) -->
  <div class="hidden md:hidden bg-gray-800 dark:bg-gray-950 pb-2">
    <div class="flex flex-col items-center space-y-2 py-2">
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Discover</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Browse</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Live</a>
      <a href="#" class="block w-full text-center py-2 hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300">Community</a>
    </div>
  </div>
</nav>

관련 구성 요소

Brutalism 끈적끈적한 내비게이션

Brutalism 디자인, 단색 색 구성표, 포트폴리오용으로 설계된 복잡한 Sticky Navigation 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 다크 모드를 지원합니다.

열다

고정 탐색 컴포넌트 - 다크 모드 파스텔

다크 모드용으로 설계된 고정 탐색 모음으로, 반응형 레이아웃과 파스텔 색상 액센트가 특징입니다. 탐색 모음은 사용자가 스크롤할 때 뷰포트 맨 위에 유지되어 콘텐츠가 많은 페이지의 사용성을 향상시킵니다. 여기에는 로고 또는 사이트 제목에 대한 자리 표시자와 탐색 링크가 포함되어 있으며, 현대적이고 깔끔한 모양을 위해 Tailwind CSS로 스타일이 지정되었습니다.

열다

브루탈리즘 끈적끈적한 내비게이션

Tailwind CSS를 사용하여 반응형 동작과 다크 모드를 지원하는 브루탈리스트 스타일의 고정 탐색 구성 요소입니다. 높은 대비, 대담한 타이포그래피, 그리고 뚜렷하고 생생한 미학이 특징입니다.

열다