Rubick Bootstrap HTML Admin Template
Application Dashboard
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Rubick Tailwind HTML Admin Template
Christian Bale
christianbale@left4code.com
Rubick Tailwind HTML Admin Template
Johnny Depp
johnnydepp@left4code.com
Rubick Tailwind HTML Admin Template
Charlize Theron
charlizetheron@left4code.com
Rubick Tailwind HTML Admin Template
Brad Pitt
bradpitt@left4code.com
Products
Rubick Tailwind HTML Admin Template
Dell XPS 13
PC & Laptop
Rubick Tailwind HTML Admin Template
Nike Tanjun
Sport & Outdoor
Rubick Tailwind HTML Admin Template
Dell XPS 13
PC & Laptop
Rubick Tailwind HTML Admin Template
Nikon Z6
Photography
Notifications
Rubick Bootstrap HTML Admin Template
Christian Bale
01:10 PM
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomi
Rubick Bootstrap HTML Admin Template
Johnny Depp
05:09 AM
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
Rubick Bootstrap HTML Admin Template
Charlize Theron
05:09 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
Rubick Bootstrap HTML Admin Template
Brad Pitt
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
Rubick Bootstrap HTML Admin Template
Brad Pitt
01:10 PM
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Dropdown

Basic Dropdown 

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

Header & Footer Dropdown

Icon Dropdown 

  HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary" aria-expanded="false" data-bs-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-feather="edit-2" class="w-4 h-4 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag New Dropdown HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-feather="trash" class="w-4 h-4 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Delete Dropdown HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Programmatically Show/Hide Dropdown 

  HTMLOpenTag!-- BEGIN: Show Modal Toggle --HTMLCloseTag HTMLOpenTagbutton id="programmatically-show-dropdown" class="btn btn-primary w-40 me-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 me-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 me-1 mb-2"HTMLCloseTagToggleHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag!-- END: Toggle Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Dropdown Content --HTMLCloseTag HTMLOpenTagdiv class="dropdown d-inline-block"HTMLCloseTag HTMLOpenTagbutton id="programmatically-dropdown" class="dropdown-toggle btn btn-primary w-40 me-1 mb-2" aria-expanded="false" data-bs-auto-close="inside" data-bs-toggle="dropdown"HTMLCloseTagExample DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-48"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagNew DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaga href="" class="dropdown-item"HTMLCloseTagDelete DropdownHTMLOpenTag/aHTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Dropdown Content --HTMLCloseTag  
  let dropdown = new bootstrap.Dropdown( cash("#programmatically-dropdown")[0] ); // Show dropdown cash("#programmatically-show-dropdown").on("click", function () { dropdown.show(); }); // Hide dropdown cash("#programmatically-hide-dropdown").on("click", function () { dropdown.hide(); }); // Toggle dropdown cash("#programmatically-toggle-dropdown").on("click", function () { dropdown.toggle(); });

Dropdown with close button

From
To
  HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary" aria-expanded="false" data-bs-auto-close="outside" data-bs-toggle="dropdown"HTMLCloseTag Filter Dropdown HTMLOpenTagi data-feather="chevron-down" class="w-4 h-4 ms-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu"HTMLCloseTag HTMLOpenTagdiv class="dropdown-content p-4"HTMLCloseTag HTMLOpenTagdivHTMLCloseTag HTMLOpenTagdiv class="fs-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="fs-xs"HTMLCloseTagToHTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="form-control mt-2 flex-1" placeholder="example@gmail.com"/HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="d-flex align-items-center mt-3"HTMLCloseTag HTMLOpenTagbutton data-bs-dismiss="dropdown" class="btn btn-secondary w-32 ms-auto"HTMLCloseTagCloseHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton class="btn btn-primary w-32 ms-2"HTMLCloseTagSearchHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Scrolled Dropdown 

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

Header & Icon Dropdown 

  HTMLOpenTagdiv class="dropdown"HTMLCloseTag HTMLOpenTagbutton class="dropdown-toggle btn btn-primary" aria-expanded="false" data-bs-toggle="dropdown"HTMLCloseTagShow DropdownHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTagh6 class="dropdown-header py-0"HTMLCloseTagExport ToolsHTMLOpenTag/h6HTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTagHTMLOpenTaghr class="dropdown-divider"HTMLCloseTagHTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-feather="printer" class="w-4 h-4 text-gray-700 dark-text-gray-300 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Print HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-feather="external-link" class="w-4 h-4 text-gray-700 dark-text-gray-300 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Excel HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-feather="file-text" class="w-4 h-4 text-gray-700 dark-text-gray-300 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag CSV HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-feather="archive" class="w-4 h-4 text-gray-700 dark-text-gray-300 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag PDF HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag

Dropdown Placement

Dark Mode