Dropdown

Pages

Users

Brad Pitt

bradpitt@left4code.com

Leonardo DiCaprio

leonardodicaprio@left4code.com

Johnny Depp

johnnydepp@left4code.com

Russell Crowe

russellcrowe@left4code.com

Products

Apple MacBook Pro 13

PC & Laptop

Samsung Galaxy S20 Ultra

Notifications

Brad Pitt

03:20 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

Leonardo DiCaprio

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

Johnny Depp

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

Russell Crowe

06:05 AM

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

Sylvester Stallone

06:05 AM

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

  HTMLOpenTagdiv class="dropdown relative"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle button inline-block bg-theme-1 text-white"HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-box mt-10 absolute w-40 top-0 left-0 z-20"HTMLCloseTag HTMLOpenTagdiv class="dropdown-box__content box dark:bg-dark-1 p-2"HTMLCloseTag HTMLOpenTaga href="" class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Position Dropdown

Show code

  HTMLOpenTagdiv class="dropdown relative"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle button inline-block bg-theme-1 text-white"HTMLCloseTagLeft DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-box mt-10 absolute w-40 top-0 right-0 z-20"HTMLCloseTag HTMLOpenTagdiv class="dropdown-box__content box dark:bg-dark-1 p-2"HTMLCloseTag HTMLOpenTaga href="" class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown relative sm:ml-2 mt-2 sm:mt-0"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle button inline-block bg-theme-1 text-white"HTMLCloseTagRight DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-box mt-10 absolute w-40 top-0 left-0 z-20"HTMLCloseTag HTMLOpenTagdiv class="dropdown-box__content box dark:bg-dark-1 p-2"HTMLCloseTag HTMLOpenTaga href="" class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Icon Dropdown

Show code

  HTMLOpenTagdiv class="dropdown relative"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle button inline-block bg-theme-1 text-white"HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-box mt-10 absolute w-48 top-0 left-0 z-20"HTMLCloseTag HTMLOpenTagdiv class="dropdown-box__content box dark:bg-dark-1 p-2"HTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="edit-2" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag New Dropdown HTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="trash" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Delete Dropdown HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Header & Footer Dropdown

Show code

  HTMLOpenTagdiv class="dropdown relative"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle button inline-block bg-theme-1 text-white"HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-box mt-10 absolute w-56 top-0 right-0 -mr-12 sm:mr-0 z-20"HTMLCloseTag HTMLOpenTagdiv class="dropdown-box__content box dark:bg-dark-1"HTMLCloseTag HTMLOpenTagdiv class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium"HTMLCloseTagExport OptionsHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="p-2"HTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="activity" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Export to PDF HTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="box" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Export to Excel HTMLOpenTagdiv class="text-xs text-white px-1 rounded-full bg-theme-6 ml-auto"HTMLCloseTag10HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="layout" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Export to CSV HTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="sidebar" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Export to Word HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex"HTMLCloseTag HTMLOpenTagbutton type="button" class="button button--sm bg-theme-1 text-white"HTMLCloseTagSettingsHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="button button--sm bg-gray-200 text-gray-600 ml-auto"HTMLCloseTagView ProfileHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Scrolled Dropdown

Show code

  HTMLOpenTagdiv class="dropdown relative"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle button inline-block bg-theme-1 text-white"HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-box mt-10 absolute w-40 top-0 right-0 z-20"HTMLCloseTag HTMLOpenTagdiv class="dropdown-box__content box dark:bg-dark-1 p-2 overflow-y-auto h-32"HTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTagJanuaryHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTagFebruaryHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTagMarchHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTagJuneHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTagJulyHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Header & Icon Dropdown

Show code

  HTMLOpenTagdiv class="dropdown relative"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle button inline-block bg-theme-1 text-white"HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-box mt-12 absolute w-40 top-0 right-0 z-20"HTMLCloseTag HTMLOpenTagdiv class="dropdown-box__content box dark:bg-dark-1"HTMLCloseTag HTMLOpenTagdiv class="px-4 py-2 border-b border-gray-200 dark:border-dark-5 font-medium"HTMLCloseTagExport ToolsHTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="p-2"HTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="printer" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Print HTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="external-link" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Excel HTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="file-text" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag CSV HTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="archive" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag PDF HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag