Dropdown
Basic Dropdown
HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton _____=&____;________-______ btn btn-primary" aria-expanded="false" data-bs-toggle="dropdown"HTMLCloseTagShow ___________________/__________________ HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul _____=&____;________-_______&____;____________ HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag _____________________________________ href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag ___________/_______________ HTMLOpenTag/divHTMLCloseTag
Header & Footer Dropdown
Icon Dropdown
HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton _____=&____;________-______ btn btn-primary" aria-expanded="false" data-bs-toggle="dropdown"HTMLCloseTagShow ___________________/__________________ HTMLOpenTagdiv class="dropdown-menu w-48"HTMLCloseTag HTMLOpenTagul _____=&____;________-_______&____;____________ HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag ____________ data-feather="edit-2" class="w-4 h-4 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag ___ Dropdown HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag ____________ href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-feather="trash" _____=&____;_-4 h-4 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Delete Dropdown ___________/_____________ HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag
Programmatically Show/Hide Dropdown
HTMLOpenTag!-- BEGIN: Show _____ Toggle --HTMLCloseTag HTMLOpenTagbutton id="programmatically-show-dropdown" _____=&____;___ btn-primary w-40 me-1 mb-2"HTMLCloseTagShowHTMLOpenTag/buttonHTMLCloseTag ___________!-- END: Show Modal Toggle --____________ HTMLOpenTag!-- BEGIN: Hide Modal ______ --HTMLCloseTag HTMLOpenTagbutton id="programmatically-hide-dropdown" class="btn ___-_______ w-40 me-1 mb-2"HTMLCloseTagHideHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- ___: Hide Modal Toggle --HTMLCloseTag ___________!-- BEGIN: Toggle Modal Toggle --____________ HTMLOpenTagbutton id="programmatically-toggle-dropdown" class="btn btn-primary _-40 me-1 mb-2"HTMLCloseTagToggleHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: ______ Modal Toggle --HTMLCloseTag HTMLOpenTag!-- _____: Dropdown Content --HTMLCloseTag HTMLOpenTagdiv _____=&____;________ d-inline-block"HTMLCloseTag HTMLOpenTagbutton id="programmatically-dropdown" class="dropdown-toggle ___ btn-primary w-40 me-1 mb-2" ____-________=&____;_____&____; data-bs-auto-close="inside" data-bs-toggle="dropdown"HTMLCloseTagExample DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv _____=&____;________-____ w-48"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga ____=&____;&____; class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" _____=&____;________-____&____;__________________ DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag ___________!-- END: Dropdown Content --HTMLCloseTag
let dropdown = ___ bootstrap.Dropdown( cash("#programmatically-dropdown")[0] ); // ____ dropdown cash("#programmatically-show-dropdown").on("click", function () { dropdown.show(); }); // Hide ________ cash("#programmatically-hide-dropdown").on("click", function () { ________.____(); }); // Toggle dropdown ____(&____;#________________-______-________&____;).__(&____;_____&____;, function () { dropdown.toggle(); });
Dropdown with close button
Scrolled Dropdown
HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton _____=&____;________-______ btn btn-primary" aria-expanded="false" data-bs-toggle="dropdown"HTMLCloseTagShow ___________________/__________________ HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul _____=&____;________-_______ overflow-y-auto h-32"HTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" _____=&____;________-____&____;______________________________/________________________/______________ HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagFebruaryHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga ____=&____;&____; class="dropdown-item"HTMLCloseTagMarchHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagJuneHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag _____________________________________ href="" class="dropdown-item"HTMLCloseTagJulyHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag ___________/_______________
Header & Icon Dropdown
HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton _____=&____;________-______ btn btn-primary" aria-expanded="false" data-bs-toggle="dropdown"HTMLCloseTagShow ___________________/__________________ HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul _____=&____;________-_______&____;____________ HTMLOpenTagliHTMLCloseTagHTMLOpenTagh6 class="dropdown-header py-0"HTMLCloseTagExport ToolsHTMLOpenTag/h6HTMLCloseTagHTMLOpenTag/liHTMLCloseTag ______________________________________ class="dropdown-divider"HTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" _____=&____;________-____&____;____________ HTMLOpenTagi data-feather="printer" class="w-4 h-4 ____-____-700 dark-text-gray-300 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Print HTMLOpenTag/aHTMLCloseTag ___________/______________ HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag ____________ data-feather="external-link" class="w-4 h-4 text-gray-700 ____-____-____-300 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Excel HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag _________________________ HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi ____-_______=&____;____-____&____; class="w-4 h-4 text-gray-700 dark-text-gray-300 __-2&____;_______________________/_____________ CSV HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag ____________ href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-feather="archive" _____=&____;_-4 h-4 text-gray-700 dark-text-gray-300 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag ___ HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag ___________/_______________
Dropdown Placement
HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv _____=&____;______ d-inline-block"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn ___-_______ w-32 me-1 mb-2" aria-expanded="false" ____-__-______=&____;________&____;_______________ StartHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag _____________ class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew ___________________/________________________/______________ HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag ___________/______________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropup _-______-_____&____;____________ HTMLOpenTagbutton class="dropdown-toggle btn btn-primary _-32 me-1 mb-2" aria-expanded="false" data-bs-toggle="dropdown"HTMLCloseTagTop ______________/__________________ HTMLOpenTagdiv class="dropdown-menu w-40 dropdown-menu-end"HTMLCloseTag _____________ class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew ___________________/________________________/______________ HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag ___________/______________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropend _-______-_____&____;____________ HTMLOpenTagbutton class="dropdown-toggle btn btn-primary _-32 me-1 mb-2" aria-expanded="false" data-bs-toggle="dropdown"HTMLCloseTagRightHTMLOpenTag/buttonHTMLCloseTag ______________ class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag _____________________________________ href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga ____=&____;&____; class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag ___________/_______________ HTMLOpenTagdiv class="dropstart d-inline-block"HTMLCloseTag HTMLOpenTagbutton _____=&____;________-______ btn btn-primary w-32 me-1 __-2&____; aria-expanded="false" data-bs-toggle="dropdown"HTMLCloseTagLeftHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu _-40&____;____________ HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" _____=&____;________-____&____;_______________ DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete ___________________/________________________/______________ HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv _____=&____;________ d-inline-block"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn ___-_______ w-32 me-1 mb-2" aria-expanded="false" ____-__-______=&____;________&____;__________________ StartHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag _____________ class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew ___________________/________________________/______________ HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag ___________/______________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="dropdown _-______-_____&____;____________ HTMLOpenTagbutton class="dropdown-toggle btn btn-primary _-32 me-1 mb-2" aria-expanded="false" data-bs-toggle="dropdown"HTMLCloseTagBottom ______________/__________________ HTMLOpenTagdiv class="dropdown-menu w-40 dropdown-menu-end"HTMLCloseTag _____________ class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew ___________________/________________________/______________ HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag ___________/______________ HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag