Dropdown

ADMIN PANEL

Dropdown

Add dropdown using dropdown class.

Preview Html
  • Dashboard
  • Settings
  • Ui Kits
  • Alert
  • Ui Kits
  • Avatar
  • Ui Kits
  • Badge
  • Ui Kits
  • Button
  • Ui Kits
  • Collapse
  • Ui Kits
  • Divider 
<div class="flex flex-wrap gap-2 2md:justify-center">
   <div class="dropdown">
    <button class="text-white btn btn-primary"> Primary </button>
    <div class="dropdown-menu !w-fit !top-11 left-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Dashboard </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Settings </li> 
      </ul>                                    
    </div>
   </div> 
   <div class="dropdown">
    <button class="text-white btn btn-secondary"> Secondary </button>
    <div class="dropdown-menu !w-fit !top-11 left-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Alert </li> 
      </ul>                                    
    </div>
   </div> 
   <div class="dropdown">
    <button class="text-white btn btn-info"> Info </button>
    <div class="dropdown-menu !w-fit !top-11 left-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Avatars </li> 
      </ul>                                    
    </div>
   </div> 
   <div class="dropdown">
    <button class="text-white btn btn-success"> Success </button>
    <div class="dropdown-menu !w-fit !top-11 left-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Badge </li> 
      </ul>                                    
    </div>
   </div> 
   <div class="dropdown">
    <button class="text-white btn btn-warning"> Warning </button>
    <div class="dropdown-menu !w-fit !top-11 left-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Button </li> 
      </ul>                                    
    </div>
   </div> 
   <div class="dropdown">
    <button class="text-white btn btn-dander"> Danger </button>
    <div class="dropdown-menu !w-fit !top-11 left-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Collapse </li> 
      </ul>                                    
    </div>
   </div> 
   <div class="dropdown">
    <button class="btn btn-light text-title"> Light </button>
    <div class="dropdown-menu !w-fit !top-11 left-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Divider </li>
      </ul>                                    
    </div>
   </div> 
</div>

Hover Me

Set hover effect inside dropdown-menu using hover class.

Preview Html
  • Contacts
  • Chat
<div class="flex flex-wrap gap-2 2md:justify-center">
   <div class="dropdown on-hover-show">
    <button class="text-white btn btn-warning"> Hover Me </button>
    <div class="dropdown-menu !w-36 left-0 !top-11"> 
      <ul class="flex flex-col cursor-pointer !gap-1">
        <li class="px-2 py-1 hover:bg-gray-200"> Contacts </li>
        <li class="px-2 py-1 hover:bg-gray-200"> Chat </li> 
      </ul>
    </div> 
   </div>
</div>

Justify Content

Set dropdown-menu content justify using text-* class.

Preview Html
  • Dashboard
  • Settings
  • Earning
  • Settings
  • Learning
  • Settings
     <div class="dropdown dropdown-end"> 
       <label tabindex="0" class="text-white btn btn-accent">Click</label>
        <ul tabindex="0" class="w-auto p-2 mt-1 shadow dropdown-content menu bg-base-100 rounded-box"> 
          <li><a href="javascript:void(0)" class="active:text-white">Item 1</a></li>
         <li><a href="javascript:void(0)" class="active:text-white">Item 2</a></li>
       </ul>
     </div>

Alignment

Set dropdown-menu alignment using dropdown-* class.

Preview Html
  • Home
  • Tasks
  • Notifications
  • Messages
  • Dashboard
  • Settings
  • Profile
  • Chat
     <div class="flex flex-wrap gap-2 2md:justify-center">
   <div class="dropdown dropdown-right">
    <button class="text-white btn btn-info"> Align Right </button>
    <div class="dropdown-menu !w-36 2md:!w-fit"> 
      <ul class="flex flex-col gap-1 cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Home </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Tasks </li> 
      </ul>                                    
    </div>
   </div> 
   <div class="dropdown dropdown-top">
    <button class="text-white btn btn-danger"> Align Top </button>
    <div class="dropdown-menu !w-36 2md:!w-fit"> 
      <ul class="flex flex-col gap-1 cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Notifications </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Messages </li> 
      </ul>                                    
    </div>
   </div> 
   <div class="dropdown">
    <button class="text-white btn btn-primary"> Align Bottom </button>
    <div class="dropdown-menu !w-36 2md:!w-fit !top-11 left-0"> 
      <ul class="flex flex-col gap-1 cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Dashboard </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Setting </li> 
      </ul>                                    
    </div>
   </div> 
   <div class="dropdown dropdown-left">
    <button class="text-white btn btn-success"> Align Left </button>
    <div class="dropdown-menu !w-36 2md:!w-fit"> 
      <ul class="flex flex-col gap-1 cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Profile </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Chat </li> 
      </ul>                                    
    </div>
   </div> 
</div>

With Divider

Set dropdown-menu with the divider.

Preview Html
  • Contacts
  • Chat
Separated Link
     <div class="flex flex-wrap gap-2 2md:justify-center">
   <div class="dropdown">
    <button class="text-white btn btn-primary"> Divider </button>
    <div class="dropdown-menu !w-36 left-0 !top-11"> 
      <div class="border-b border-border-light">
        <ul class="flex flex-col gap-1 cursor-pointer">
          <li class="px-2 py-1 rounded hover:bg-gray-200"> Contacts </li>
          <li class="px-2 py-1 rounded hover:bg-gray-200"> Chat </li> 
        </ul>               
      </div>
      <div> <a href="javascript:void(0)" class="p-1 rounded hover:bg-gray-200">Separated Link</a></div>
    </div> 
   </div>
</div>

Colored

Set different color dropdown-menu.

Preview Html
  • Contacts
  • Chat
  • About us
  • Contacts
  • Chat
  • About us
     <div class="flex flex-wrap gap-2 2md:justify-center">
   <div class="dropdown">
    <button class="text-white btn btn-primary"> Primary </button>
    <div class="dropdown-menu !w-36 left-0 !top-11 !bg-border-light text-white"> 
      <div>
        <ul class="flex flex-col cursor-pointer !gap-1">
          <li> Contacts </li>
          <li> Chat </li> 
          <li> About us </li> 
        </ul>               
      </div>
    </div> 
   </div>
   <div class="dropdown">
    <button class="text-white btn btn-secondary"> Secondary </button>
    <div class="dropdown-menu !w-36 left-0 !top-11 !bg-border-light text-white"> 
      <div>
        <ul class="flex flex-col cursor-pointer !gap-1">
          <li> Contacts </li>
          <li> Chat </li> 
          <li> About us </li> 
        </ul>               
      </div>
    </div> 
   </div>
</div>

Heading Dropdown

Add heading for dropdown.

Preview Html

Dropdown List

  • Click on
  • Hover on
      <div class="flex flex-wrap gap-2 2md:justify-center">
   <div class="dropdown">
    <button class="text-white btn btn-info"> Heading </button>
    <div class="dropdown-menu !w-36 left-0 !top-11"> 
      <div class="border-b border-border-light">
        <h3 class="mb-1 text-sm font-bold text-title"> Dropdown List </h3>
      </div>
      <div class="mt-1">
        <ul class="flex flex-col cursor-pointer !gap-1">
          <li class="transition-all hover:bg-gray-200 hover:px-2 hover:py-1"> Click on </li>
          <li class="transition-all hover:bg-gray-200 hover:px-2 hover:py-1"> Hover on </li> 
        </ul>               
      </div>
    </div> 
   </div>
</div>

Helper Card

Add card for dropdown.

Preview Html

Learn More!

Here, you can learn more and more

      <div class="flex flex-wrap gap-2 2md:justify-center">
   <div class="dropdown">
    <button class="text-white btn btn-danger"> Helper card </button>
    <div class="dropdown-menu card !w-36 left-0 !top-11 rounded !bg-danger 2md:left-[-74%]"> 
      <div class="text-white card-body">
        <h3 class="mb-1 text-lg font-bold"> Learn More! </h3> 
          <p class="font-medium"> Here, you can learn more and more </p>             
      </div>
    </div> 
   </div>
</div>

With Input Type

Add input types inside dropdown.

Preview Html
      <div class="flex flex-wrap gap-2 2md:justify-center">
   <div class="dropdown">
    <button class="text-white btn btn-info"> Inputs </button>
    <div class="dropdown-menu !w-36 left-0 !top-11">
      <ul class="!gap-1">
        <li>
          <div class="flex items-center gap-2">
            <input type="radio" class="w-3 h-3 cursor-pointer border-gray focus:ring-current focus:right-1">
            <label> Default Radio </label>
          </div>
        </li>
        <li>
          <div class="flex items-center gap-2">
            <input type="checkbox" class="w-3 h-3 cursor-pointer border-gray focus:ring-current focus:right-1">
            <label> Default Checkbox </label>
          </div>
        </li>
      </ul>
    </div> 
   </div>
</div>

With Icon

Add icons with dropdown

Preview Html
  • Dashboard
  • Settings
     <div class="flex flex-wrap gap-2 2md:justify-center">
   <div class="dropdown">
    <button class="text-white btn btn-primary"> Home </button>
        +SVG_ICON("Arrow-Down-2","w-[20px] h-[17px] stroke-white")
    <div class="dropdown-menu !w-36 !top-11 left-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Dashboard </li>
        <li class="px-2 py-1 rounded hover:bg-gray-200"> Settings </li> 
      </ul>                                    
    </div>
   </div> 
</div>
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now