Dropdown

Pages

Users

Robert De Niro

robertdeniro@left4code.com

Brad Pitt

bradpitt@left4code.com

Kevin Spacey

kevinspacey@left4code.com

Al Pacino

alpacino@left4code.com

Products

Sony A7 III

Photography

Sony Master Series A9G

Electronic

Dell XPS 13

PC & Laptop

Samsung Galaxy S20 Ultra

Smartphone & Tablet

Notifications

Robert De Niro

06:05 AM

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem

Brad Pitt

01:10 PM

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 20

Kevin Spacey

05:09 AM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Al Pacino

06:05 AM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Russell Crowe

01:10 PM

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi

Basic Dropdown

Show code

                                          <div class="dropdown relative"> <button class="dropdown-toggle button inline-block bg-theme-1 text-white">Show Dropdown</button>
     <div class="dropdown-box mt-10 absolute w-40 top-0 left-0 z-20">
         <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">New Dropdown</a> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">Delete Dropdown</a> </div>
     </div>
 </div> 
                                    

Position Dropdown

Show code

                                          <div class="dropdown relative"> <button class="dropdown-toggle button inline-block bg-theme-1 text-white">Left Dropdown</button>
     <div class="dropdown-box mt-10 absolute w-40 top-0 right-0 z-20">
         <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">New Dropdown</a> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">Delete Dropdown</a> </div>
     </div>
 </div>
 <div class="dropdown relative sm:ml-2 mt-2 sm:mt-0"> <button class="dropdown-toggle button inline-block bg-theme-1 text-white">Right Dropdown</button>
     <div class="dropdown-box mt-10 absolute w-40 top-0 left-0 z-20">
         <div class="dropdown-box__content box p-2"> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">New Dropdown</a> <a href="" class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">Delete Dropdown</a> </div>
     </div>
 </div> 
                                    

Icon Dropdown

Show code

                                          <div class="dropdown relative"> <button class="dropdown-toggle button inline-block bg-theme-1 text-white">Show Dropdown</button>
     <div class="dropdown-box mt-10 absolute w-48 top-0 left-0 z-20">
         <div class="dropdown-box__content box p-2"> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="edit-2" class="w-4 h-4 mr-2"></i> New Dropdown </a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="trash" class="w-4 h-4 mr-2"></i> Delete Dropdown </a> </div>
     </div>
 </div> 
                                    

Header & Footer Dropdown

Show code

                                          <div class="dropdown relative"> <button class="dropdown-toggle button inline-block bg-theme-1 text-white">Show Dropdown</button>
     <div class="dropdown-box mt-10 absolute w-56 top-0 right-0 -mr-12 sm:mr-0 z-20">
         <div class="dropdown-box__content box">
             <div class="p-4 border-b border-gray-200 font-medium">Export Options</div>
             <div class="p-2"> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="activity" class="w-4 h-4 text-gray-700 mr-2"></i> Export to PDF </a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="box" class="w-4 h-4 text-gray-700 mr-2"></i> Export to Excel <div class="text-xs text-white px-1 rounded-full bg-theme-6 ml-auto">10</div> </a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="layout" class="w-4 h-4 text-gray-700 mr-2"></i> Export to CSV </a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="sidebar" class="w-4 h-4 text-gray-700 mr-2"></i> Export to Word </a> </div>
             <div class="px-3 py-3 border-t border-gray-200 font-medium flex"> <button type="button" class="button button--sm bg-theme-1 text-white">Settings</button> <button type="button" class="button button--sm bg-gray-200 text-gray-600 ml-auto">View Profile</button> </div>
         </div>
     </div>
 </div> 
                                    

Scrolled Dropdown

Show code

                                          <div class="dropdown relative"> <button class="dropdown-toggle button inline-block bg-theme-1 text-white">Show Dropdown</button>
     <div class="dropdown-box mt-10 absolute w-40 top-0 right-0 z-20">
         <div class="dropdown-box__content box p-2 overflow-y-auto h-32"> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">January</a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">February</a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">March</a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">June</a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md">July</a> </div>
     </div>
 </div> 
                                    

Header & Icon Dropdown

Show code

                                          <div class="dropdown relative"> <button class="dropdown-toggle button inline-block bg-theme-1 text-white">Show Dropdown</button>
     <div class="dropdown-box mt-12 absolute w-40 top-0 right-0 z-20">
         <div class="dropdown-box__content box">
             <div class="px-4 py-2 border-b border-gray-200 font-medium">Export Tools</div>
             <div class="p-2"> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="printer" class="w-4 h-4 text-gray-700 mr-2"></i> Print </a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="external-link" class="w-4 h-4 text-gray-700 mr-2"></i> Excel </a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="file-text" class="w-4 h-4 text-gray-700 mr-2"></i> CSV </a> <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"> <i data-feather="archive" class="w-4 h-4 text-gray-700 mr-2"></i> PDF </a> </div>
         </div>
     </div>
 </div> 
                                    