Dropdown

Dropdown

Add dropdown using .dropdown class.

  • 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">
   <div class="dropdown">
    <button class="text-white btn btn-primary"> Primary </button>
    <div class="dropdown-menu !w-fit !top-11 left-0 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Dashboard </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> 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 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> 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 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> 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 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> 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 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> 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 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> 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 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Ui Kits </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Divider </li>
      </ul>                                    
    </div>
   </div> 
</div>

Hover Effect

Set hover effect inside dropdown-menu using .hover class.

  • Contacts
  • Chat
  • Video
  • Songs
<div class="flex flex-wrap gap-2">
   <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 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col cursor-pointer !gap-1">
        <li class="px-2 py-1 hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Contacts </li>
        <li class="px-2 py-1 hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Chat </li> 
      </ul>
    </div> 
   </div>
   <div class="dropdown on-hover-show">
    <button class="text-white btn btn-primary"> Hover Inside </button>
    <div class="dropdown-menu !w-36 left-0 !top-11 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col cursor-pointer !gap-1">
        <li class="px-2 py-1 transition-all hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Contacts </li>
        <li class="px-2 py-1 transition-all hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Chat </li> 
      </ul>
    </div> 
   </div>
</div>

Justify Content

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

  • Dashboard
  • Settings
  • Earning
  • Settings
  • Learning
  • Settings
<div class="flex flex-wrap gap-2">
   <div class="dropdown">
    <button class="text-white btn btn-Success"> Text Left </button>
    <div class="dropdown-menu !w-36 !top-11 left-0 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col cursor-pointer text-start">
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Dashboard </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Settings </li> 
      </ul>                                    
    </div>
   </div>
   <div class="dropdown">
    <button class="text-white btn btn-secondary"> Text Center </button>
    <div class="dropdown-menu !w-36 !top-11 left-0 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col text-center cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Earning </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Settings </li> 
      </ul>                                    
    </div>
   </div>
   <div class="dropdown">
    <button class="text-white btn btn-warning"> Text Right </button>
    <div class="dropdown-menu !w-36 !top-11 left-0 rtl:left-unset rtl:!right-0"> 
      <ul class="flex flex-col cursor-pointer text-end">
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Learning </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Settings </li> 
      </ul>                                    
    </div>
   </div> 
</div>

Alignment

Add dropdown-menu alignment using .dropdown-* class.

  • Home
  • Tasks
  • Notifications
  • Messages
  • Dashboard
  • Settings
  • Profile
  • Chat
<div class="flex flex-wrap gap-2">
   <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-light dark:hover:bg-sidebar-dark2"> Home </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> 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-light dark:hover:bg-sidebar-dark2"> Notifications </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> 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-light dark:hover:bg-sidebar-dark2"> Dashboard </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> 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-light dark:hover:bg-sidebar-dark2"> Profile </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Chat </li> 
      </ul>                                    
    </div>
   </div> 
</div>

With Divider

Set dropdown-menu with the divider.

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

Colored

Set different colored for dropdown-menu.

  • Contacts
  • Chat
  • About us
  • Contacts
  • Chat
  • About us
<div class="flex flex-wrap gap-2">
   <div class="dropdown">
    <button class="text-white btn btn-primary"> Primary Colored </button>
    <div class="dropdown-menu !w-36 left-0 !top-11 rtl:left-unset rtl:!right-0 !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 Colored </button>
    <div class="dropdown-menu !w-36 left-0 !top-11 rtl:left-unset rtl:!right-0 !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

Main heading and any sub-content in dropdown.

Dropdown List

  • Click on
  • Hover on
<div class="flex flex-wrap gap-2">
   <div class="dropdown">
    <button class="text-white btn btn-info"> Heading </button>
    <div class="dropdown-menu !w-36 left-0 !top-11 rtl:left-unset rtl:!right-0"> 
      <div class="border-b border-border-light dark:border-b dark:border-border-dark ">
        <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-light hover:px-2 hover:py-1 dark:hover:bg-sidebar-dark2"> Click on </li>
          <li class="transition-all hover:bg-gray-light hover:px-2 hover:py-1 dark:hover:bg-sidebar-dark2"> Hover on </li> 
        </ul>               
      </div>
    </div> 
   </div>
</div>

Helper Card

Adding card for dropdown.

Learn More!

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

With Input Type

Set input types inside dropdown

  • Default Radio

  • Default Checkbox

<div class="flex flex-wrap gap-2">
   <div class="dropdown">
    <button class="text-white btn btn-success"> Inputs </button>
    <div class="dropdown-menu !w-36 left-0 !top-11 rtl:left-unset rtl:!right-0">
      <ul class="!gap-1">
        <li>
          <div class="flex items-center gap-2 primary">
            <div class="relative">
              <input type="radio" class="absolute opacity-0 cursor-pointer peer" id="radio">
              <div class="w-4 h-4 border border-primary relative peer-checked:block top-[0rem] rounded-full"></div>
              <div class="bg-transparent w-2 h-2 rounded-full absolute peer-checked:bg-primary peer-checked:left[0.25rem] peer-checked:top[0.25rem] left-[0.25rem] top-[0.25rem]"></div>
              <p> Default Radio </p>
            </div>
          </div>
        </li>
        <li>
          <div class="flex items-center gap-2">
            <label class="checkbox w-4 h-4 cursor-pointer></label>
              <input type="checkbox" class="peer">
              <span class="checkbox-indicator peer-checked:!bg-primary !border-primary"></span>
                  <i data-feather="check"></i>
            <p> Default Checkbox </p>
          </div>
        </li>
      </ul>
    </div> 
   </div>
</div>

With Icon

Add icons with dropdown

  • Dashboard
  • Settings
<div class="flex flex-wrap gap-2">
   <div class="dropdown">
    <button class="text-white btn btn-primary"> Home </button>
        +SVG_ICON("Arrow-Down-2","w-[1.25rem] h-[1.0625rem] stroke-white")
    <div class="dropdown-menu !w-36 !top-11 left-0 rtl:left-unset rtl:!right-0">
      <ul class="flex flex-col cursor-pointer">
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Dashboard </li>
        <li class="px-2 py-1 rounded hover:bg-gray-light dark:hover:bg-sidebar-dark2"> Settings </li> 
      </ul>                                    
    </div>
   </div> 
</div>

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode