-
Notification
-
Dmitriy Groshev
Hi, i am josephin. How are you...
17:123 -
Sufiya Elija
I need job, Please help me.
Fri -
Janis Evans
Good Morning!
8:2212 -
Mukrani Pabelo
Hi, i am josephin. How are you...
03:1410 -
Josephin Water
You’ve got some kind of a stom...
Thu -
Janis Evans
Good Morning!
8:2212 -
Sufiya Elija
I need job, Please help me.
Fri
-
-
-
-
Cart Items (25)
-
Flower Pot
$25.00
-
Iphone Max pro
$35.20
-
Royal Party Glass
$45.10
-
Water Proof Watch
$12.30
-
Traveling Duffle Bag
$32.10
Proceed to CheckoutAdd Total
$250.00 -
-
-
-
English -
French -
Spanich -
Arabic
-
-
Helen Walter
Admin
Dropdown
Dropdown
You can add dropdown using dropdown class.
<div class="flex flex-wrap gap-2 2md:justify-center">
<div class="dropdown">
<button class="btn btn-primary text-white"> Primary </button>
<div class="dropdown-menu !w-fit !top-11 left-0">
<ul class="flex flex-col cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Dashboard </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Settings </li>
</ul>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary text-white"> Secondary </button>
<div class="dropdown-menu !w-fit !top-11 left-0">
<ul class="flex flex-col cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Ui Kits </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Alert </li>
</ul>
</div>
</div>
<div class="dropdown">
<button class="btn btn-info text-white"> Info </button>
<div class="dropdown-menu !w-fit !top-11 left-0">
<ul class="flex flex-col cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Ui Kits </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Avatars </li>
</ul>
</div>
</div>
<div class="dropdown">
<button class="btn btn-success text-white"> Success </button>
<div class="dropdown-menu !w-fit !top-11 left-0">
<ul class="flex flex-col cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Ui Kits </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Badge </li>
</ul>
</div>
</div>
<div class="dropdown">
<button class="btn btn-warning text-white"> Warning </button>
<div class="dropdown-menu !w-fit !top-11 left-0">
<ul class="flex flex-col cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Ui Kits </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Button </li>
</ul>
</div>
</div>
<div class="dropdown">
<button class="btn btn-dander text-white"> Danger </button>
<div class="dropdown-menu !w-fit !top-11 left-0">
<ul class="flex flex-col cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Ui Kits </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> 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="hover:bg-gray-light rounded px-2 py-1"> Ui Kits </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Divider </li>
</ul>
</div>
</div>
</div>
Hover Effect
You can set hover effect inside dropdown-menu using hover class.
<div class="flex flex-wrap gap-2 2md:justify-center">
<div class="dropdown on-hover-show">
<button class="btn btn-warning text-white"> Hover Me </button>
<div class="dropdown-menu !w-36 left-0 !top-11">
<ul class="flex flex-col cursor-pointer !gap-1">
<li class="hover:bg-gray-light px-2 py-1"> Contacts </li>
<li class="hover:bg-gray-light px-2 py-1"> Chat </li>
</ul>
</div>
</div>
<div class="dropdown on-hover-show">
<button class="btn btn-primary text-white"> Hover Inside </button>
<div class="dropdown-menu !w-36 left-0 !top-11">
<ul class="flex flex-col cursor-pointer !gap-1">
<li class="hover:bg-gray-light hover:px-2 hover:py-1 transition-all"> Contacts </li>
<li class="hover:bg-gray-light hover:px-2 hover:py-1 transition-all"> Chat </li>
</ul>
</div>
</div>
</div>
Justify Content
You can set dropdown-menu content justify using text-* class.
<div class="flex flex-wrap gap-2 2md:justify-center">
<div class="dropdown">
<button class="btn btn-Success text-white"> Text Left </button>
<div class="dropdown-menu !w-36 !top-11 left-0">
<ul class="flex flex-col text-start cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Dashboard </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Settings </li>
</ul>
</div>
</div>
<div class="dropdown">
<button class="btn btn-secondary text-white"> Text Center </button>
<div class="dropdown-menu !w-36 !top-11 left-0">
<ul class="flex flex-col text-center cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Earning </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Settings </li>
</ul>
</div>
</div>
<div class="dropdown">
<button class="btn btn-warning text-white"> Text Right </button>
<div class="dropdown-menu !w-36 !top-11 left-0 2sm:right-0 2sm:left-unset">
<ul class="flex flex-col text-end cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Learning </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Settings </li>
</ul>
</div>
</div>
</div>
Alignment
You can set dropdown-menu alignmnet using dropdown-* class.
<div class="flex flex-wrap gap-2 2md:justify-center">
<div class="dropdown dropdown-right">
<button class="btn btn-info text-white"> Align Right </button>
<div class="dropdown-menu !w-36 2md:!w-fit">
<ul class="flex flex-col gap-1 cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Home </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Tasks </li>
</ul>
</div>
</div>
<div class="dropdown dropdown-top">
<button class="btn btn-danger text-white"> Align Top </button>
<div class="dropdown-menu !w-36 2md:!w-fit">
<ul class="flex flex-col gap-1 cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Notifications </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Messages </li>
</ul>
</div>
</div>
<div class="dropdown">
<button class="btn btn-primary text-white"> 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="hover:bg-gray-light rounded px-2 py-1"> Dashboard </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Setting </li>
</ul>
</div>
</div>
<div class="dropdown dropdown-left">
<button class="btn btn-success text-white"> Align Left </button>
<div class="dropdown-menu !w-36 2md:!w-fit">
<ul class="flex flex-col gap-1 cursor-pointer">
<li class="hover:bg-gray-light rounded px-2 py-1"> Profile </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Chat </li>
</ul>
</div>
</div>
</div>
With Divider
You can set dropdown-menu with the divider.
<div class="flex flex-wrap gap-2 2md:justify-center">
<div class="dropdown">
<button class="btn btn-primary text-white"> 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="hover:bg-gray-light rounded px-2 py-1"> Contacts </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Chat </li>
</ul>
</div>
<div> <a href="javascript:void(0)" class="hover:bg-gray-light rounded p-1">Separated Link</a></div>
</div>
</div>
</div>
Colored
You can set different colored for dropdown-menu.
<div class="flex flex-wrap gap-2 2md:justify-center">
<div class="dropdown">
<button class="btn btn-primary text-white"> Primary Colored </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="btn btn-secondary text-white"> Secondary Colored </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
You can add heading for dropdown.
<div class="flex flex-wrap gap-2 2md:justify-center">
<div class="dropdown">
<button class="btn btn-info text-white"> Heading </button>
<div class="dropdown-menu !w-36 left-0 !top-11">
<div class="border-b border-border-light">
<h3 class="text-sm font-bold text-title mb-1"> Dropdown List </h3>
</div>
<div class="mt-1">
<ul class="flex flex-col cursor-pointer !gap-1">
<li class="hover:bg-gray-light hover:px-2 hover:py-1 transition-all"> Click on </li>
<li class="hover:bg-gray-light hover:px-2 hover:py-1 transition-all"> Hover on </li>
</ul>
</div>
</div>
</div>
</div>
Helper Card
You can add card for dropdown.
<div class="flex flex-wrap gap-2 2md:justify-center">
<div class="dropdown">
<button class="btn btn-danger text-white"> Helper card </button>
<div class="dropdown-menu card !w-36 left-0 !top-11 rounded !bg-danger 2md:left-[-74%]">
<div class="card-body text-white">
<h3 class="text-lg font-bold mb-1"> Learn More! </h3>
<p class="font-medium"> Here, you can learn more and more </p>
</div>
</div>
</div>
</div>
With Input Type
You can add input types inside dropdown
<div class="flex flex-wrap gap-2 2md:justify-center">
<div class="dropdown">
<button class="btn btn-info text-white"> Inputs </button>
<div class="dropdown-menu !w-36 left-0 !top-11">
<ul class="!gap-1">
<li>
<div class="flex gap-2 items-center">
<input type="radio" class="cursor-pointer w-3 h-3 border-gray focus:ring-current focus:right-1">
<label> Default Radio </label>
</div>
</li>
<li>
<div class="flex gap-2 items-center">
<input type="checkbox" class="cursor-pointer w-3 h-3 border-gray focus:ring-current focus:right-1">
<label> Default Checkbox </label>
</div>
</li>
</ul>
</div>
</div>
</div>
With Icon
You can add icons with dropdown
<div class="flex flex-wrap gap-2 2md:justify-center">
<div class="dropdown">
<button class="btn btn-primary text-white"> Home </button>
+SVG_ICON("Shop-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="hover:bg-gray-light rounded px-2 py-1"> Dashboard </li>
<li class="hover:bg-gray-light rounded px-2 py-1"> Settings </li>
</ul>
</div>
</div>
</div>