Rubick Bootstrap HTML Admin Template
Rubick Tailwind HTML Admin Template Rubick
Application Dashboard
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Rubick Tailwind HTML Admin Template
Denzel Washington
denzelwashington@left4code.com
Rubick Tailwind HTML Admin Template
Tom Cruise
tomcruise@left4code.com
Rubick Tailwind HTML Admin Template
Russell Crowe
russellcrowe@left4code.com
Rubick Tailwind HTML Admin Template
Al Pacino
alpacino@left4code.com
Products
Rubick Tailwind HTML Admin Template
Nike Tanjun
Sport & Outdoor
Rubick Tailwind HTML Admin Template
Sony Master Series A9G
Electronic
Rubick Tailwind HTML Admin Template
Sony A7 III
Photography
Rubick Tailwind HTML Admin Template
Oppo Find X2 Pro
Smartphone & Tablet
Notifications
Rubick Bootstrap HTML Admin Template
Denzel Washington
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
Tom Cruise
06:05 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
Russell Crowe
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
Al Pacino
06:05 AM
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
Rubick Bootstrap HTML Admin Template
Robert De Niro
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

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