구성 요소 탐색 모음 Navigation Bar 구성 요소

Navigation Bar 구성 요소

종이/인쇄물에서 영감을 받은 미적 요소와 보석 색조 색 구성표로 설계된 복잡하고 반응이 빠른 탐색 모음 구성 요소로, 농업/농업 웹 사이트에 적합합니다. 다크 모드 지원 및 여러 대화형 요소가 포함되어 있습니다.

미리 보기

HTML 코드

<header class="bg-emerald-700 font-serif shadow-xl dark:bg-emerald-950">
  <nav class="container mx-auto px-4 py-3 md:flex md:items-center md:justify-between">
    <div class="flex items-center justify-between">
      <a href="#" class="flex items-center text-2xl font-bold text-white transition duration-300 ease-in-out hover:text-emerald-200 dark:text-emerald-50 dark:hover:text-emerald-300">
        <img src="https://picsum.photos/id/1084/40/40" alt="Farm Logo" class="mr-2 rounded-full border-2 border-emerald-500 shadow-md dark:border-emerald-700">
        AgriConnect
      </a>
      <button class="peer rounded-md p-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 md:hidden" type="button" aria-label="Toggle navigation">
        <svg class="h-6 w-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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <div class="relative hidden flex-col transition-all duration-500 ease-in-out peer-focus:flex md:flex md:flex-row md:items-center md:space-x-8 lg:space-x-12">
      <a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200" aria-current="page">Home</a>
      
      <div class="group relative">
        <button class="flex items-center rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 focus:outline-none dark:hover:bg-emerald-800 dark:hover:text-emerald-200" type="button">
          Products
          <svg class="ml-2 h-4 w-4 transform transition-transform duration-300 ease-in-out group-hover:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
        </button>
        <div class="absolute left-0 top-full hidden w-48 origin-top-right scale-y-0 transform rounded-md bg-emerald-600 shadow-lg transition-all duration-300 ease-in-out group-hover:scale-y-100 group-hover:block dark:bg-emerald-800">
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Seeds & Grains</a>
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Fertilizers</a>
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Equipment</a>
        </div>
      </div>

      <div class="group relative">
        <button class="flex items-center rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 focus:outline-none dark:hover:bg-emerald-800 dark:hover:text-emerald-200" type="button">
          Services
          <svg class="ml-2 h-4 w-4 transform transition-transform duration-300 ease-in-out group-hover:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
        </button>
        <div class="absolute left-0 top-full hidden w-48 origin-top-right scale-y-0 transform rounded-md bg-emerald-600 shadow-lg transition-all duration-300 ease-in-out group-hover:scale-y-100 group-hover:block dark:bg-emerald-800">
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Consultation</a>
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Soil Testing</a>
          <a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Logistics</a>
        </div>
      </div>

      <a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">Resources</a>
      <a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">About Us</a>
      <a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">Contact</a>

      <div class="space-x-4 md:pl-4">
        <button class="rounded-full bg-emerald-500 px-4 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:bg-emerald-700 dark:hover:bg-emerald-600" type="button">
          <svg class="inline-block h-5 w-5 align-text-bottom" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V4a1 1 0 00-1-1H3zm2 1.5a.5.5 0 01.5-.5h9a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1zM5.5 9a.5.5 0 000 1h9a.5.5 0 000-1h-9z" clip-rule="evenodd"></path></svg>
          Dashboard
        </button>
      </div>
    </div>
  </nav>
</header>

관련 구성 요소

Luxury_Premium_Dating_Social_NavBar

데이트/소셜 플랫폼을 위한 고급스러운/프리미엄 스타일의 탐색 모음으로, 우아한 타이포그래피, 고대비 색 구성표, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다. 프로필 아바타 및 알림 아이콘과 같은 대화형 요소가 포함됩니다.

열다

Artistic_Sepia_Navigation_Bar

다크 모드 지원을 포함하여 패션 및 뷰티 브랜드에 적합한 부드럽고 예술적인 세피아 톤의 미학을 갖춘 간단하고 반응이 빠른 탐색 모음입니다.

열다

미니멀리스트 네비게이션 바

미니멀한 스타일로 디자인된 반응형 탐색 모음 구성 요소로, 어두운 테마를 지원하고 Tailwind CSS를 활용합니다.

열다