@grigorov-it/mazer
Version:
Free and Open-source Bootstrap 5 Admin Dashboard Template and Landing Page
1,740 lines • 76.5 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dropdown - Mazer Admin Dashboard</title>
<link
rel="shortcut icon"
href="./assets/compiled/svg/favicon.svg"
type="image/x-icon"
/>
<link
rel="shortcut icon"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAiCAYAAADRcLDBAAAEs2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjMzIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMzQiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIzMyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMzQiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249Ijk2LjAiCiAgIHRpZmY6WVJlc29sdXRpb249Ijk2LjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjItMDMtMzFUMTA6NTA6MjMrMDI6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjItMDMtMzFUMTA6NTA6MjMrMDI6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgRGVzaWduZXIgMS4xMC4xIgogICAgICBzdEV2dDp3aGVuPSIyMDIyLTAzLTMxVDEwOjUwOjIzKzAyOjAwIi8+CiAgICA8L3JkZjpTZXE+CiAgIDwveG1wTU06SGlzdG9yeT4KICA8L3JkZjpEZXNjcmlwdGlvbj4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz5V57uAAAABgmlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kc8rRFEUxz9maORHo1hYKC9hISNGTWwsRn4VFmOUX5uZZ36oeTOv954kW2WrKLHxa8FfwFZZK0WkZClrYoOe87ypmWTO7dzzud97z+nec8ETzaiaWd4NWtYyIiNhZWZ2TvE946WZSjqoj6mmPjE1HKWkfdxR5sSbgFOr9Ll/rXoxYapQVik8oOqGJTwqPL5i6Q5vCzeo6dii8KlwpyEXFL519LjLLw6nXP5y2IhGBsFTJ6ykijhexGra0ITl5bRqmWU1fx/nJTWJ7PSUxBbxJkwijBBGYYwhBgnRQ7/MIQIE6ZIVJfK7f/MnyUmuKrPOKgZLpEhj0SnqslRPSEyKnpCRYdXp/9++msneoFu9JgwVT7b91ga+LfjetO3PQ9v+PgLvI1xkC/m5A+h7F32zoLXug38dzi4LWnwHzjeg8UGPGbFfySvuSSbh9QRqZ6H+Gqrm3Z7l9zm+h+iafNUV7O5Bu5z3L/wAdthn7QIme0YAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAJTSURBVFiF7Zi9axRBGIefEw2IdxFBRQsLWUTBaywSK4ubdSGVIY1Y6HZql8ZKCGIqwX/AYLmCgVQKfiDn7jZeEQMWfsSAHAiKqPiB5mIgELWYOW5vzc3O7niHhT/YZvY37/swM/vOzJbIqVq9uQ04CYwCI8AhYAlYAB4Dc7HnrOSJWcoJcBS4ARzQ2F4BZ2LPmTeNuykHwEWgkQGAet9QfiMZjUSt3hwD7psGTWgs9pwH1hC1enMYeA7sKwDxBqjGnvNdZzKZjqmCAKh+U1kmEwi3IEBbIsugnY5avTkEtIAtFhBrQCX2nLVehqyRqFoCAAwBh3WGLAhbgCRIYYinwLolwLqKUwwi9pxV4KUlxKKKUwxC6ZElRCPLYAJxGfhSEOCz6m8HEXvOB2CyIMSk6m8HoXQTmMkJcA2YNTHm3congOvATo3tE3A29pxbpnFzQSiQPcB55IFmFNgFfEQeahaAGZMpsIJIAZWAHcDX2HN+2cT6r39GxmvC9aPNwH5gO1BOPFuBVWAZue0vA9+A12EgjPadnhCuH1WAE8ivYAQ4ohKaagV4gvxi5oG7YSA2vApsCOH60WngKrA3R9IsvQUuhIGY00K4flQG7gHH/mLytB4C42EgfrQb0mV7us8AAMeBS8mGNMR4nwHamtBB7B4QRNdaS0M8GxDEog7iyoAguvJ0QYSBuAOcAt71Kfl7wA8DcTvZ2KtOlJEr+ByyQtqqhTyHTIeB+ONeqi3brh+VgIN0fohUgWGggizZFTplu12yW8iy/YLOGWMpDMTPXnl+Az9vj2HERYqPAAAAAElFTkSuQmCC"
type="image/png"
/>
<link rel="stylesheet" href="./assets/compiled/css/app.css" />
<link rel="stylesheet" href="./assets/compiled/css/app-dark.css" />
</head>
<body>
<script src="assets/static/js/initTheme.js"></script>
<div id="app">
<div id="sidebar">
<div class="sidebar-wrapper active">
<div class="sidebar-header position-relative">
<div class="d-flex justify-content-between align-items-center">
<div class="logo">
<a href="index.html"
><img
src="./assets/compiled/svg/logo.svg"
alt="Logo"
srcset=""
/></a>
</div>
<div class="theme-toggle d-flex gap-2 align-items-center mt-2">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--system-uicons"
width="20"
height="20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 21 21"
>
<g
fill="none"
fill-rule="evenodd"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M10.5 14.5c2.219 0 4-1.763 4-3.982a4.003 4.003 0 0 0-4-4.018c-2.219 0-4 1.781-4 4c0 2.219 1.781 4 4 4zM4.136 4.136L5.55 5.55m9.9 9.9l1.414 1.414M1.5 10.5h2m14 0h2M4.135 16.863L5.55 15.45m9.899-9.9l1.414-1.415M10.5 19.5v-2m0-14v-2"
opacity=".3"
></path>
<g transform="translate(-210 -1)">
<path d="M220.5 2.5v2m6.5.5l-1.5 1.5"></path>
<circle cx="220.5" cy="11.5" r="4"></circle>
<path
d="m214 5l1.5 1.5m5 14v-2m6.5-.5l-1.5-1.5M214 18l1.5-1.5m-4-5h2m14 0h2"
></path>
</g>
</g>
</svg>
<div class="form-check form-switch fs-6">
<input
class="form-check-input me-0"
type="checkbox"
id="toggle-dark"
style="cursor: pointer"
/>
<label class="form-check-label"></label>
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="20"
height="20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3l3.19.09m3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95l2.06.05m-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31Z"
></path>
</svg>
</div>
<div class="sidebar-toggler x">
<a href="#" class="sidebar-hide d-xl-none d-block"
><i class="bi bi-x bi-middle"></i
></a>
</div>
</div>
</div>
<div class="sidebar-menu">
<ul class="menu">
<li class="sidebar-title">Menu</li>
<li class="sidebar-item">
<a href="index.html" class="sidebar-link">
<i class="bi bi-grid-fill"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sidebar-item active has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-stack"></i>
<span>Components</span>
</a>
<ul class="submenu active">
<li class="submenu-item">
<a href="component-accordion.html" class="submenu-link"
>Accordion</a
>
</li>
<li class="submenu-item">
<a href="component-alert.html" class="submenu-link"
>Alert</a
>
</li>
<li class="submenu-item">
<a href="component-badge.html" class="submenu-link"
>Badge</a
>
</li>
<li class="submenu-item">
<a href="component-breadcrumb.html" class="submenu-link"
>Breadcrumb</a
>
</li>
<li class="submenu-item">
<a href="component-button.html" class="submenu-link"
>Button</a
>
</li>
<li class="submenu-item">
<a href="component-card.html" class="submenu-link">Card</a>
</li>
<li class="submenu-item">
<a href="component-carousel.html" class="submenu-link"
>Carousel</a
>
</li>
<li class="submenu-item">
<a href="component-collapse.html" class="submenu-link"
>Collapse</a
>
</li>
<li class="submenu-item active">
<a href="component-dropdown.html" class="submenu-link"
>Dropdown</a
>
</li>
<li class="submenu-item">
<a href="component-list-group.html" class="submenu-link"
>List Group</a
>
</li>
<li class="submenu-item">
<a href="component-modal.html" class="submenu-link"
>Modal</a
>
</li>
<li class="submenu-item">
<a href="component-navs.html" class="submenu-link">Navs</a>
</li>
<li class="submenu-item">
<a href="component-pagination.html" class="submenu-link"
>Pagination</a
>
</li>
<li class="submenu-item">
<a href="component-progress.html" class="submenu-link"
>Progress</a
>
</li>
<li class="submenu-item">
<a href="component-spinner.html" class="submenu-link"
>Spinner</a
>
</li>
<li class="submenu-item">
<a href="component-toasts.html" class="submenu-link"
>Toasts</a
>
</li>
<li class="submenu-item">
<a href="component-tooltip.html" class="submenu-link"
>Tooltip</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-collection-fill"></i>
<span>Extra Components</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="extra-component-avatar.html" class="submenu-link"
>Avatar</a
>
</li>
<li class="submenu-item">
<a href="extra-component-divider.html" class="submenu-link"
>Divider</a
>
</li>
<li class="submenu-item">
<a
href="extra-component-date-picker.html"
class="submenu-link"
>Date Picker</a
>
</li>
<li class="submenu-item">
<a
href="extra-component-sweetalert.html"
class="submenu-link"
>Sweet Alert</a
>
</li>
<li class="submenu-item">
<a href="extra-component-toastify.html" class="submenu-link"
>Toastify</a
>
</li>
<li class="submenu-item">
<a href="extra-component-rating.html" class="submenu-link"
>Rating</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-grid-1x2-fill"></i>
<span>Layouts</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="layout-default.html" class="submenu-link"
>Default Layout</a
>
</li>
<li class="submenu-item">
<a href="layout-vertical-1-column.html" class="submenu-link"
>1 Column</a
>
</li>
<li class="submenu-item">
<a href="layout-vertical-navbar.html" class="submenu-link"
>Vertical Navbar</a
>
</li>
<li class="submenu-item">
<a href="layout-rtl.html" class="submenu-link"
>RTL Layout</a
>
</li>
<li class="submenu-item">
<a href="layout-horizontal.html" class="submenu-link"
>Horizontal Menu</a
>
</li>
</ul>
</li>
<li class="sidebar-title">Forms & Tables</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-hexagon-fill"></i>
<span>Form Elements</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-element-input.html" class="submenu-link"
>Input</a
>
</li>
<li class="submenu-item">
<a href="form-element-input-group.html" class="submenu-link"
>Input Group</a
>
</li>
<li class="submenu-item">
<a href="form-element-select.html" class="submenu-link"
>Select</a
>
</li>
<li class="submenu-item">
<a href="form-element-radio.html" class="submenu-link"
>Radio</a
>
</li>
<li class="submenu-item">
<a href="form-element-checkbox.html" class="submenu-link"
>Checkbox</a
>
</li>
<li class="submenu-item">
<a href="form-element-textarea.html" class="submenu-link"
>Textarea</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="form-layout.html" class="sidebar-link">
<i class="bi bi-file-earmark-medical-fill"></i>
<span>Form Layout</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-journal-check"></i>
<span>Form Validation</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-validation-parsley.html" class="submenu-link"
>Parsley</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-pen-fill"></i>
<span>Form Editor</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="form-editor-quill.html" class="submenu-link"
>Quill</a
>
</li>
<li class="submenu-item">
<a href="form-editor-ckeditor.html" class="submenu-link"
>CKEditor</a
>
</li>
<li class="submenu-item">
<a href="form-editor-summernote.html" class="submenu-link"
>Summernote</a
>
</li>
<li class="submenu-item">
<a href="form-editor-tinymce.html" class="submenu-link"
>TinyMCE</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="table.html" class="sidebar-link">
<i class="bi bi-grid-1x2-fill"></i>
<span>Table</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-file-earmark-spreadsheet-fill"></i>
<span>Datatables</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="table-datatable.html" class="submenu-link"
>Datatable</a
>
</li>
<li class="submenu-item">
<a href="table-datatable-jquery.html" class="submenu-link"
>Datatable (jQuery)</a
>
</li>
</ul>
</li>
<li class="sidebar-title">Extra UI</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-pentagon-fill"></i>
<span>Widgets</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-widgets-chatbox.html" class="submenu-link"
>Chatbox</a
>
</li>
<li class="submenu-item">
<a href="ui-widgets-pricing.html" class="submenu-link"
>Pricing</a
>
</li>
<li class="submenu-item">
<a href="ui-widgets-todolist.html" class="submenu-link"
>To-do List</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-egg-fill"></i>
<span>Icons</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-icons-bootstrap-icons.html" class="submenu-link"
>Bootstrap Icons
</a>
</li>
<li class="submenu-item">
<a href="ui-icons-fontawesome.html" class="submenu-link"
>Fontawesome</a
>
</li>
<li class="submenu-item">
<a href="ui-icons-dripicons.html" class="submenu-link"
>Dripicons</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-bar-chart-fill"></i>
<span>Charts</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-chart-chartjs.html" class="submenu-link"
>ChartJS</a
>
</li>
<li class="submenu-item">
<a href="ui-chart-apexcharts.html" class="submenu-link"
>Apexcharts</a
>
</li>
</ul>
</li>
<li class="sidebar-item">
<a href="ui-file-uploader.html" class="sidebar-link">
<i class="bi bi-cloud-arrow-up-fill"></i>
<span>File Uploader</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-map-fill"></i>
<span>Maps</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="ui-map-google-map.html" class="submenu-link"
>Google Map</a
>
</li>
<li class="submenu-item">
<a href="ui-map-jsvectormap.html" class="submenu-link"
>JS Vector Map</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-three-dots"></i>
<span>Multi-level Menu</span>
</a>
<ul class="submenu">
<li class="submenu-item has-sub">
<a href="#" class="submenu-link">First Level</a>
<ul class="submenu submenu-level-2">
<li class="submenu-item">
<a href="ui-multi-level-menu.html" class="submenu-link"
>Second Level</a
>
</li>
<li class="submenu-item">
<a href="#" class="submenu-link">Second Level Menu</a>
</li>
</ul>
</li>
<li class="submenu-item has-sub">
<a href="#" class="submenu-link">Another Menu</a>
<ul class="submenu submenu-level-2">
<li class="submenu-item">
<a href="#" class="submenu-link">Second Level Menu</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="sidebar-title">Pages</li>
<li class="sidebar-item">
<a href="application-email.html" class="sidebar-link">
<i class="bi bi-envelope-fill"></i>
<span>Email Application</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-chat.html" class="sidebar-link">
<i class="bi bi-chat-dots-fill"></i>
<span>Chat Application</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-gallery.html" class="sidebar-link">
<i class="bi bi-image-fill"></i>
<span>Photo Gallery</span>
</a>
</li>
<li class="sidebar-item">
<a href="application-checkout.html" class="sidebar-link">
<i class="bi bi-basket-fill"></i>
<span>Checkout Page</span>
</a>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-person-badge-fill"></i>
<span>Authentication</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="auth-login.html" class="submenu-link">Login</a>
</li>
<li class="submenu-item">
<a href="auth-register.html" class="submenu-link"
>Register</a
>
</li>
<li class="submenu-item">
<a href="auth-forgot-password.html" class="submenu-link"
>Forgot Password</a
>
</li>
</ul>
</li>
<li class="sidebar-item has-sub">
<a href="#" class="sidebar-link">
<i class="bi bi-x-octagon-fill"></i>
<span>Errors</span>
</a>
<ul class="submenu">
<li class="submenu-item">
<a href="error-403.html" class="submenu-link">403</a>
</li>
<li class="submenu-item">
<a href="error-404.html" class="submenu-link">404</a>
</li>
<li class="submenu-item">
<a href="error-500.html" class="submenu-link">500</a>
</li>
</ul>
</li>
<li class="sidebar-title">Raise Support</li>
<li class="sidebar-item">
<a
href="https://zuramai.github.io/mazer/docs"
class="sidebar-link"
>
<i class="bi bi-life-preserver"></i>
<span>Documentation</span>
</a>
</li>
<li class="sidebar-item">
<a
href="https://github.com/zuramai/mazer/blob/main/CONTRIBUTING.md"
class="sidebar-link"
>
<i class="bi bi-puzzle"></i>
<span>Contribute</span>
</a>
</li>
<li class="sidebar-item">
<a
href="https://github.com/zuramai/mazer#donation"
class="sidebar-link"
>
<i class="bi bi-cash"></i>
<span>Donate</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="main">
<header class="mb-3">
<a href="#" class="burger-btn d-block d-xl-none">
<i class="bi bi-justify fs-3"></i>
</a>
</header>
<div class="page-heading">
<div class="page-title">
<div class="row">
<div class="col-12 col-md-6 order-md-1 order-last">
<h3>Dropdown</h3>
<p class="text-subtitle text-muted">
Multi-purpose dropdown component with tons of variations.
</p>
</div>
<div class="col-12 col-md-6 order-md-2 order-first">
<nav
aria-label="breadcrumb"
class="breadcrumb-header float-start float-lg-end"
>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Dashboard</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
Dropdown
</li>
</ol>
</nav>
</div>
</div>
</div>
<section id="basic-dropdown">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="btn-group mb-1">
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle me-1"
type="button"
id="dropdownMenuButton"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Primary
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton"
>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle me-1"
type="button"
id="dropdownMenuButtonSec"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Secondary
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButtonSec"
>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button
class="btn btn-success dropdown-toggle me-1"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Success
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton2"
>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button
class="btn btn-info dropdown-toggle me-1"
type="button"
id="dropdownMenuButton3"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Info
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton3"
>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button
class="btn btn-danger dropdown-toggle me-1"
type="button"
id="dropdownMenuButton4"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Danger
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton4"
>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button
class="btn btn-warning dropdown-toggle me-1"
type="button"
id="dropdownMenuButton5"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Warning
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton5"
>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button
class="btn btn-dark dropdown-toggle"
type="button"
id="dropdownMenuButton7"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dark
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton7"
>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Basic Dropdown End -->
<!-- Split Button Dropdown Starts -->
<section id="dropdown-with-split-btn">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Split Dropdowns</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
To create a split button add class
<code>.dropdown-toggle-split</code> with your dropdown
toggle class and to add divider between dropdown item
use class
<code>.doprdown-divider</code>
</p>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-primary">
Primary
</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-reference="parent"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#">Option 1</a>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-secondary">
Secondary
</button>
<button
type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-reference="parent"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#">Option 1</a>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-success">
Success
</button>
<button
type="button"
class="btn btn-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-reference="parent"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#">Option 1</a>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-info">Info</button>
<button
type="button"
class="btn btn-info dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-reference="parent"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#">Option 1</a>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-danger">
Danger
</button>
<button
type="button"
class="btn btn-danger dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-reference="parent"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#">Option 1</a>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-warning">
Warning
</button>
<button
type="button"
class="btn btn-warning dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-reference="parent"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#">Option 1</a>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-light">
Light
</button>
<button
type="button"
class="btn btn-light dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-reference="parent"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#">Option 1</a>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group dropdown mb-1">
<button type="button" class="btn btn-dark">Dark</button>
<button
type="button"
class="btn btn-dark dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-reference="parent"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#">Option 1</a>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Split Button Dropdown Ends -->
<!-- Dropdown with Icon Starts -->
<section id="dropdown-with-icon">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Dropdown with Icons & Emoji</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Use <code>.dropdown-item-emoji</code> within
<code>.dropdown-item</code> for font-size and spacing of
emojis.
</p>
<div class="btn-group mb-1">
<div class="dropdown">
<button
class="btn btn-primary dropdown-toggle me-1"
type="button"
id="dropdownMenuButtonIcon"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="bi bi-error-circle me-50"></i> Icon Left
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButtonIcon"
>
<a class="dropdown-item" href="#"
><i class="bi bi-bar-chart-alt-2 me-50"></i>
Option 1</a
>
<a class="dropdown-item" href="#"
><i class="bi bi-bell me-50"></i> Option 2</a
>
<a class="dropdown-item" href="#"
><i class="bi bi-time me-50"></i> Option 3</a
>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown icon-right">
<button
class="btn btn-primary dropdown-toggle me-1"
type="button"
id="dropdownMenuButtonIconRight"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Icon Right <i class="bi bi-error-circle ms-2"></i>
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButtonIconRight"
>
<a
class="dropdown-item justify-content-between"
href="#"
>Option 1
<i class="bi bi-bar-chart-alt-2 ms-2"></i
></a>
<a
class="dropdown-item justify-content-between"
href="#"
>Option 2 <i class="bi bi-bell ms-2"></i
></a>
<a
class="dropdown-item justify-content-between"
href="#"
>Option 3 <i class="bi bi-time ms-2"></i
></a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown dropdown-color-icon">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="dropdownMenuButtonEmoji"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span Class="me-50">🙂</span>Color Emoji icons
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButtonEmoji"
>
<a class="dropdown-item" href="#"
><span class="dropdown-item-emoji">😆</span>
Option 1</a
>
<a class="dropdown-item" href="#"
><span class="dropdown-item-emoji">😎</span>
Option 2
</a>
<a class="dropdown-item" href="#"
><span class="dropdown-item-emoji">🤩</span>
Option 3</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dropdown with Icon End -->
<!-- Dropdown Direction Starts -->
<section id="dropdown-directions">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Directions</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Add <code>.dropdown-menu-end</code> to a
<code>.dropdown-menu</code> to right align the dropdown
menu. Trigger dropdown menus at the up / right / left of
the elements by adding
<code>.dropup | .dropright | .dropleft </code> to the
parent element.
</p>
<div class="direction-dropdown-default mt-1">
<div class="btn-group me-1 mb-1">
<div class="dropdown">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Drop bottom right
</button>
<div class="dropdown-menu dropdown-menu-end">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#"
>Option 1</a
>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group dropup me-1 mb-1">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Drop up
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#"
>Option 1</a
>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div class="btn-group dropend me-1 mb-1">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Drop right
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#"
>Option 2</a
>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div class="btn-group dropstart mb-1">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Drop left
</button>
<div class="dropdown-menu">
<h6 class="dropdown-header">Header</h6>
<a class="dropdown-item active" href="#"
>Option 1</a
>
<a class="dropdown-item disabled" href="#"
>Option 2</a
>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dropdown Direction End -->
<!-- Dropdown Sizes Starts -->
<section id="dropdown-sizes">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Sizes</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Button dropdowns work with buttons of all sizes,
including default and split dropdown buttons.
</p>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="btn-group me-1 mb-1">
<div class="dropdown">
<button
type="button"
class="btn btn-primary btn-lg dropdown-toggle"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Large
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group me-1 mb-1">
<div class="dropdown">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Default
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
<div class="btn-group mb-1">
<div class="dropdown">
<button
type="button"
class="btn btn-primary btn-sm dropdown-toggle"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Small
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="btn-group dropdown me-1 mb-1">
<button
type="button"
class="btn btn-primary btn-lg"
>
Large
</button>
<button
type="button"
class="btn btn-primary btn-lg dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div class="btn-group dropdown me-1 mb-1">
<button type="button" class="btn btn-primary">
Default
</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
<div class="btn-group dropdown mb-1">
<button
type="button"
class="btn btn-primary btn-sm"
>
Small
</button>
<button
type="button"
class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<a class="dropdown-item" href="#">Option 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dropdown Sizes Ends -->
<!-- Dropdown options Starts -->
<section id="dropdown-options">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Options</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
Use <code>data-offset</code> or
<code>data-reference</code> attributes to change the
location of the dropdown.
</p>
<div class="btn-group dropdown me-1 mb-1">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
id="dropdownMenuOffset"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-offset="5,20"
>
Offset
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuOffset"
>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#"
>Something else here</a
>
</div>
</div>
<div class="btn-group dropdown mb-1">
<button type="button" class="btn btn-secondary">
Reference
</button>
<button
type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
id="dropdownMenuReference"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
data-reference="parent"
>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuReference"
>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#"
>Something else here</a
>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dropdown options Ends -->
<!-- Dropdown variations Starts -->
<section id="dropdown-variations">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Variations</h4>
</div>
<div class="card-content">
<div class="card-body">
<p>
To create a dropdown with groups you can use
<c6de>.dropdown-header</c6de> for the header of groups
and for separation of group you can use
<code>.dropdown-divider</code>.
</p>
<p>
To create a dropdown with icons use class
<code>.dropdown-icon-wrapper</code> with
<code>.dropdown</code>.
</p>
<div class="btn-group dropup me-1 mb-1">
<button
class="btn btn-primary dropdown-toggle"
type="button"
id="dropdownMenuButton902"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Groups
</button>
<div
class="dropdown-menu"
aria-labelledby="dropdownMenuButton902"
>
<h6 class="dropdown-header">Group 1</h6>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Group 2</h6>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Group 3</h6>
<a class="dropdown-item" href="#">Option 1</a>
<a class="dropdown-item" href="#">Option 2</a>
</div>
</div>
<div
class="btn-group dropup dropdown-icon-wrapper me-1 mb-1"
>
<button type="button" class="btn btn-primary">
Icons
</button>
<button
type="button"
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="bi bi-wifi dropdown-icon"></i>
</button>
<div class="dropdown-menu">
<span class="dropdown-item">
<i class="bi bi-wifi-off"></i>
</span>
<span class="dropdown-item">
<i class="bi bis-volume"></i>
</span>
<span class="dropdown-item">
<i class="bi bis-volume-full"></i>
</span>
<span class="dropdown-item">
<i class="bi bi-bell"></i>
</span>
<span class="dropdown-item">
<i class="bi bi-bell-off"></i>
</span>
<span class="dropdown-item">
<i class="bi bi-phone"></i>
</span>
</div>
</div>
<div class="btn-group dropup mb-1">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Form
</button>
<div class="dropdown-menu">
<form class="px-2 py-2">
<div class="form-group">
<label for="exampleDropdownFormEmail1"
>Email address</label
>
<input
type="email"
class="form-control"
id="exampleDropdownFormEmail1"
placeholder="Email"
/>
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1"
>Password</label
>
<input
type="password"
class="form-control"
id="exampleDropdownFormPassword1"
placeholder="Password"
/>
</div>
<div class="form-group">
<div class="checkbox">
<input
type="checkbox"
class="checkbox-input"
id="dropdownCheck1"
/>
<label for="dropdownCheck1">Remember me</label>
</div>
</div>
<button type="submit" class="btn btn-primary">
Sign in
</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"
>New around here? Sign up</a
>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Dropdown variations Ends -->
</div>
<footer>
<div class="footer clearfix mb-0 text-muted">
<div class="float-start">
<p>2023 © Mazer</p>
</div>
<div class="float-end">
<p>
Crafted with
<span class="text-danger"
><i class="bi bi-heart-fill icon-mid"></i
></span>
by <a href="https://saugi.me">Saugi</a>
</p>
</div>
</div>
</footer>
</div>
</div>
<script src="assets/static/js/components/dark.js"></script>
<script src="assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="assets/compiled/js/app.js"></script>
</body>
</html>