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

드롭다운 메뉴 컴포넌트

Tailwind CSS를 사용하는 머티리얼 디자인 원칙에 따라 설계된 반응형 드롭다운 메뉴 구성요소로, 어두운 모드를 지원하고 자리표시자 이미지를 포함합니다.

미리 보기

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-indigo-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700" aria-haspopup="true" aria-expanded="true" aria-controls="options">
      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.23 7.21a.75.75 0 011.06 0l3.47 3.47 3.47-3.47a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0l-4.24-4.24a.75.75 0 010-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute z-10 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Profile
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Account
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Dashboard
      </a>
      <div class="border-t border-gray-100 dark:border-gray-700"></div>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Logout
      </a>
    </div>
  </div>
</div>

<div class="hidden md:flex md:items-center">
  <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="h-10 w-10 rounded-full shadow-lg" />
  <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-200">User Name</span>
</div>

관련 구성 요소

드롭다운 메뉴 구성 요소 5

다크 모드용으로 설계된 반응형 드롭다운 메뉴 구성 요소로, 스타일링 및 레이아웃에 Tailwind CSS를 활용합니다. 이 구성 요소는 세련된 디자인, 호버 효과 및 어두운 테마 지원을 특징으로 하여 현대적인 UI 경험을 보장합니다.

열다

레트로/빈티지 드롭다운 메뉴

레트로/빈티지 미학으로 전자 상거래를 위해 설계된 복잡한 드롭다운 메뉴 구성 요소로, 단색 색상, 풍부한 인터페이스, 다크 모드 지원을 포함한 반응형 디자인을 특징으로 합니다.

열다

드롭다운 메뉴 컴포넌트

비즈니스/기업용으로 설계된 반응형 드롭다운 메뉴 구성 요소로, 마이크로 인터랙션과 보색을 특징으로 합니다. 밝은 테마와 어두운 테마를 모두 지원하며 스타일링에 Tailwind CSS를 사용합니다.

열다