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

  HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary" aria-expanded="false"HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-56"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTagh6 class="dropdown-header"HTMLCloseTagExport OptionsHTMLOpenTag/h6HTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaghr class="dropdown-divider"HTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-lucide="activity" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag English HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-lucide="box" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Indonesia HTMLOpenTagdiv class="text-xs text-white px-1 rounded-full bg-danger ml-auto"HTMLCloseTag10HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-lucide="layout" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag English HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-lucide="sidebar" class="w-4 h-4 mr-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Indonesia HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaghr class="dropdown-divider"HTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTagdiv class="flex p-1"HTMLCloseTag HTMLOpenTagbutton type="button" class="btn btn-primary py-1 px-2"HTMLCloseTagSettingsHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="btn btn-secondary py-1 px-2 ml-auto"HTMLCloseTagView ProfileHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

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... })