Dropdown

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 p-2"HTMLCloseTag HTMLOpenTaga href=""class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 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 p-2"HTMLCloseTag HTMLOpenTaga href=""class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 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 p-2"HTMLCloseTag HTMLOpenTaga href=""class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 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 p-2"HTMLCloseTag HTMLOpenTaga href=""class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 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 hover:bg-gray-200 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"HTMLCloseTag HTMLOpenTagdiv class="p-4 border-b border-gray-200 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 hover:bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="activity"class="w-4 h-4 text-gray-700 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 hover:bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="box"class="w-4 h-4 text-gray-700 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 hover:bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="layout"class="w-4 h-4 text-gray-700 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 hover:bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="sidebar"class="w-4 h-4 text-gray-700 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Export to Word HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="px-3 py-3 border-t border-gray-200 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 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 hover:bg-gray-200 rounded-md"HTMLCloseTagJanuaryHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"HTMLCloseTagFebruaryHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"HTMLCloseTagMarchHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"HTMLCloseTagJuneHTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 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"HTMLCloseTag HTMLOpenTagdiv class="px-4 py-2 border-b border-gray-200 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 hover:bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="printer"class="w-4 h-4 text-gray-700 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Print HTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="external-link"class="w-4 h-4 text-gray-700 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Excel HTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="file-text"class="w-4 h-4 text-gray-700 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag CSV HTMLOpenTag/aHTMLCloseTag HTMLOpenTaga href=""class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"HTMLCloseTag HTMLOpenTagi data-feather="archive"class="w-4 h-4 text-gray-700 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag PDF HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag