<!-- Basic dropdown --><divclass="dropdown-menu"><ahref="#"class="dropdown-item">Regular link</a><ahref="#"class="dropdown-item">Another regular link</a><ahref="#"class="dropdown-item active">Active link</a><ahref="#"class="dropdown-item disabled">Disabled link</a></div><!-- Dropdown with header and divider --><divclass="dropdown-menu"><h6class="dropdown-header">Dropdown header</h6><ahref="#"class="dropdown-item">Action</a><ahref="#"class="dropdown-item">Another action</a><divclass="dropdown-divider"></div><ahref="#"class="dropdown-item">Separeted link</a></div><!-- Dropdown with icons and badges --><divclass="dropdown-menu"><ahref="#"class="dropdown-item"><iclass="ai-home me-2"></i>
Regular link
<spanclass="badge bg-secondary ms-2">2</span></a><ahref="#"class="dropdown-item"><iclass="ai-user me-2"></i>
Profile
<spanclass="badge bg-danger ms-2">3</span></a><ahref="#"class="dropdown-item"><iclass="ai-messages me-2"></i>
Messages
<spanclass="badge bg-success ms-2">5</span></a><ahref="#"class="dropdown-item"><iclass="ai-settings me-2"></i>
Settings
</a></div>
// Basic dropdown.dropdown-menua(href="#").dropdown-item| Regular link
a(href="#").dropdown-item| Another regular link
a(href="#").dropdown-item.active| Active link
a(href="#").dropdown-item.disabled| Disabled link
// Dropdown with header and divider.dropdown-menuh6.dropdown-header| Dropdown header
a(href="#").dropdown-item| Action
a(href="#").dropdown-item| Another action
.dropdown-dividera(href="#").dropdown-item| Separated link
// Dropdown with icons and badges.dropdown-menua(href="#").dropdown-itemi.ai-home.me-2| Home
span.badge.bg-secondary.ms-2| 2
a(href="#").dropdown-itemi.ai-user.me-2| Profile
span.badge.bg-danger.ms-2| 3
a(href="#").dropdown-itemi.ai-messages.me-2| Messages
span.badge.bg-success.ms-2| 5
a(href="#").dropdown-itemi.ai-settings.me-2| Settings
<!-- Basic dark dropdown --><divclass="dropdown-menu dropdown-menu-dark"><ahref="#"class="dropdown-item">Regular link</a><ahref="#"class="dropdown-item">Another regular link</a><ahref="#"class="dropdown-item active">Active link</a><ahref="#"class="dropdown-item disabled">Disabled link</a></div><!-- Dark dropdown with header and divider --><divclass="dropdown-menu dropdown-menu-dark"><h6class="dropdown-header">Dropdown header</h6><ahref="#"class="dropdown-item">Action</a><ahref="#"class="dropdown-item">Another action</a><divclass="dropdown-divider"></div><ahref="#"class="dropdown-item">Separeted link</a></div><!-- Dark dropdown with icons and badges --><divclass="dropdown-menu dropdown-menu-dark"><ahref="#"class="dropdown-item"><iclass="ai-home me-2"></i>
Regular link
<spanclass="badge bg-secondary ms-2">2</span></a><ahref="#"class="dropdown-item"><iclass="ai-user me-2"></i>
Profile
<spanclass="badge bg-danger ms-2">3</span></a><ahref="#"class="dropdown-item"><iclass="ai-messages me-2"></i>
Messages
<spanclass="badge bg-success ms-2">5</span></a><ahref="#"class="dropdown-item"><iclass="ai-settings me-2"></i>
Settings
</a></div>
// Basic dropdown.dropdown-menu.dropdown-menu-darka(href="#").dropdown-item| Regular link
a(href="#").dropdown-item| Another regular link
a(href="#").dropdown-item.active| Active link
a(href="#").dropdown-item.disabled| Disabled link
// Dropdown with header and divider.dropdown-menu.dropdown-menu-darkh6.dropdown-header| Dropdown header
a(href="#").dropdown-item| Action
a(href="#").dropdown-item| Another action
.dropdown-dividera(href="#").dropdown-item| Separated link
// Dropdown with icons and badges.dropdown-menu.dropdown-menu-darka(href="#").dropdown-itemi.ai-home.me-2| Home
span.badge.bg-secondary.ms-2| 2
a(href="#").dropdown-itemi.ai-user.me-2| Profile
span.badge.bg-danger.ms-2| 3
a(href="#").dropdown-itemi.ai-messages.me-2| Messages
span.badge.bg-success.ms-2| 5
a(href="#").dropdown-itemi.ai-settings.me-2| Settings
// Forms inside dropdown.dropdown-menu(style="width: 19rem;")form.p-4.mb-3label.form-label(for="exampleDropdownFormEmail")| Email address
input(type="email",id="exampleDropdownFormEmail",placeholder="email@example.com",required).form-control.mb-3label.form-label(for="exampleDropdownFormPassword")| Password
input(type="password",id="exampleDropdownFormPassword",placeholder="Password",required).form-control.mb-3.custom-control.custom-checkboxinput(type="checkbox",id="dropdownCheck").custom-control-inputlabel(for="dropdownCheck").custom-control-label| Remember me
button(type="submit").btn.btn-primary| Sign In
<!-- Right-aligned dropdown --><divclass="btn-group dropdown"><buttontype="button"class="btn btn-primary dropdown-toggle"data-bs-toggle="dropdown"aria-haspopup="true"aria-expanded="false">
Right-aligned menu example
</button><divclass="dropdown-menu dropdown-menu-end my-1"><ahref="#"class="dropdown-item">Action</a><ahref="#"class="dropdown-item">Another action</a><divclass="dropdown-divider"></div><ahref="#"class="dropdown-item">Something else here</a></div></div>
// Right-aligned dropdown.btn-group.dropdownbutton(type="button",data-bs-toggle="dropdown",aria-haspopup="true",aria-expanded="false").btn.btn-primary.dropdown-toggle| Right-aligned menu example
.dropdown-menu.dropdown-menu-end.my-1a(href="#").dropdown-item| Action
a(href="#").dropdown-item| Another action
.dropdown-dividera(href="#").dropdown-item| Something else here