CCHub Logo CCHub Tailwind Collection
구성 요소 드롭다운 메뉴 드롭다운 메뉴 컴포넌트

드롭다운 메뉴 컴포넌트

다크 모드를 지원하는 반응형 드롭다운 메뉴 구성 요소

미리 보기

HTML 코드 

<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-700 dark:focus:ring-blue-600" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="menu-item-3">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

관련 구성 요소

3D_Marketplace_Dropdown_Menu

마켓플레이스 플랫폼용으로 설계된 복잡한 3D에서 영감을 받은 드롭다운 메뉴 구성 요소로, 따뜻한 무채색, 다단계 탐색, 다크 모드 지원을 통한 완전한 응답성을 제공합니다. 미묘한 그림자와 전환을 통해 깊이와 몰입도를 통합합니다.

열다

사이버펑크 다크 모드 드롭다운 메뉴

대시보드를 위한 복잡한 사이버펑크 테마의 드롭다운 메뉴 구성 요소로, 어두운 배경, 미묘하고 밝은 액센트가 있는 그레이스케일 색상, 완전한 응답성을 제공합니다.

열다

Glassmorphism 드롭다운 메뉴

기술/SaaS 애플리케이션에 적합한 자주색/보라색 톤을 사용하는 glassmorphism 디자인의 간단하고 반응이 빠른 드롭다운 메뉴입니다. 다크 모드를 지원합니다.

열다