Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Arnold Schwarzenegger
arnoldschwarzenegger@left4code.com
Robert De Niro
robertdeniro@left4code.com
Johnny Depp
johnnydepp@left4code.com
Denzel Washington
denzelwashington@left4code.com
Products
Dell XPS 13
PC & Laptop
Nikon Z6
Photography
Samsung Galaxy S20 Ultra
Smartphone & Tablet
Dell XPS 13
PC & Laptop

## Dropdown

## Basic Dropdown

Show example code

      HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Header & Footer Dropdown

Show example code

## Icon Dropdown

Show example code

      HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-48"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-lucide="edit-2" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag New Dropdown HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-lucide="trash" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Delete Dropdown HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Dropdown With Close Button

Show example code

      HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="bottom-start"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTag Filter Dropdown HTMLOpenTagi data-lucide="chevron-down" class="w-4 h-4 ml-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu"HTMLCloseTag HTMLOpenTagdiv class="dropdown-content"HTMLCloseTag HTMLOpenTagdiv class="p-2"HTMLCloseTag HTMLOpenTagdivHTMLCloseTag HTMLOpenTagdiv class="text-xs"HTMLCloseTagFromHTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="form-control mt-2 flex-1" placeholder="example@gmail.com"/HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="mt-3"HTMLCloseTag HTMLOpenTagdiv class="text-xs"HTMLCloseTagToHTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="form-control mt-2 flex-1" placeholder="example@gmail.com"/HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="flex items-center mt-3"HTMLCloseTag HTMLOpenTagbutton data-dismiss="dropdown" class="btn btn-secondary w-32 ml-auto"HTMLCloseTagCloseHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-primary w-32 ml-2"HTMLCloseTagSearchHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Scrolled Dropdown

Show example code

      HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content overflow-y-auto h-32"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagJanuaryHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagFebruaryHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagMarchHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagJuneHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagJulyHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Header & Icon Dropdown

Show example code

      HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTagdiv class="dropdown-header"HTMLCloseTagExport ToolsHTMLOpenTag/divHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaghr class="dropdown-divider"HTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-lucide="printer" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Print HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-lucide="external-link" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Excel HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-lucide="file-text" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag CSV HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-lucide="archive" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag PDF HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Dropdown Placement

Show example code

      HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="top-start"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagTop StartHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="top"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagTopHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="top-end"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagTop EndHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="right-start"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagRight StartHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="right"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagRightHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="right-end"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagRight EndHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="bottom-end"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagBottom EndHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="bottom"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagBottomHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="bottom-start" HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagBottom StartHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="left-start"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagLeft StartHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="left"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagLeftHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block" data-tw-placement="left-end"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-32 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown"HTMLCloseTagLeft EndHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

## Programmatically Show/Hide Dropdown

Show example code

      HTMLOpenTag!-- BEGIN: Show Modal Toggle --HTMLCloseTag HTMLOpenTagbutton id="programmatically-show-dropdown" class="btn btn-primary w-40 mr-1 mb-2"HTMLCloseTagShowHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Show Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Hide Modal Toggle --HTMLCloseTag HTMLOpenTagbutton id="programmatically-hide-dropdown" class="btn btn-primary w-40 mr-1 mb-2"HTMLCloseTagHideHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Hide Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Toggle Modal Toggle --HTMLCloseTag HTMLOpenTagbutton id="programmatically-toggle-dropdown" class="btn btn-primary w-40 mr-1 mb-2"HTMLCloseTagToggleHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Toggle Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Dropdown Content --HTMLCloseTag HTMLOpenTagdiv class="dropdown inline-block"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary w-40 mr-1 mb-2" aria-expanded="false" data-tw-toggle="dropdown" id="programmatically-dropdown"HTMLCloseTagExample DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Dropdown Content --HTMLCloseTag

      // Show dropdown const el = document.querySelector("#programmatically-dropdown"); const dropdown = tailwind.Dropdown.getOrCreateInstance(el); dropdown.show(); // Hide dropdown const el = document.querySelector("#programmatically-dropdown"); const dropdown = tailwind.Dropdown.getOrCreateInstance(el); dropdown.hide(); // Toggle dropdown const el = document.querySelector("#programmatically-dropdown"); const dropdown = tailwind.Dropdown.getOrCreateInstance(el); dropdown.toggle();

## Methods

Get or Create Instance
Static method which allows you to get the dropdown instance associated with a DOM element, or create a new one in case it wasn’t initialized.

      const myDropdown = tailwind.Dropdown.getOrCreateInstance(document.querySelector("#myDropdown"));

Get Instance
Static method which allows you to get the dropdown instance associated with a DOM element.

      const myDropdown = tailwind.Dropdown.getInstance(document.querySelector("#myDropdown"));

Hide
Manually hides a dropdown. Returns to the caller before the dropdown has actually been hidden (i.e. before the hidden.tw.dropdown event occurs).

      myDropdown.hide();

Show
Manually opens a dropdown. Returns to the caller before the dropdown has actually been shown (i.e. before the shown.tw.dropdown event occurs).

      myDropdown.show();

Toggle
Manually toggles a dropdown. Returns to the caller before the dropdown has actually been shown or hidden (i.e. before the shown.tw.dropdown or hidden.tw.dropdown event occurs).

      myDropdown.toggle();

## Events

Midone’s dropdown class exposes a few events for hooking into dropdown functionality. All dropdown events are fired at the dropdown itself (i.e. at the <div class="dropdown">).

Event type | Description
--- | ---
show.tw.dropdown | This event fires immediately when the show instance method is called.
shown.tw.dropdown | This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions to complete)
hide.tw.dropdown | This event is fired immediately when the hide instance method has been called.
hidden.tw.dropdown | This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions to complete).

      const myDropdownEl = document.getElementById('myDropdown') myDropdownEl.addEventListener('hidden.tw.dropdown', function (event) { // do something... })

Dark Mode