Overview
Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs. The examples shown here use semantic <ul> elements where appropriate, but custom markup is supported.
Dropdown Style
Code Example
<div class="dropdown"> <button class="btn btn-nmw btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> <span>Dropdown button</span><em class="ni ni-chevron-down icon"></em> </button> <div class="dropdown-menu"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something</a></li> </ul> </div> </div> <div class="dropdown"> <a class="btn btn-nmw btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> <span>Dropdown link</span><em class="ni ni-chevron-down icon"></em> </a> <div class="dropdown-menu"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something</a></li> </ul> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-nmw btn-secondary">Action</button> <button type="button" class="btn btn-nmw btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <em class="ni ni-chevron-down icon"></em> </button> <div class="dropdown-menu"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something</a></li> <li><hr class="dropdown-divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-nmw btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <span>Dropup</span><em class="ni ni-chevron-up icon"></em> </button> <div class="dropdown-menu"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something</a></li> <li><hr class="dropdown-divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-nmw btn-secondary"> <span>Split Dropup</span> </button> <button type="button" class="btn btn-nmw btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <em class="ni ni-chevron-up icon"></em> </button> <div class="dropdown-menu"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something</a></li> <li><hr class="dropdown-divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <div class="btn-group dropend"> <button type="button" class="btn btn-nmw btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <span>Dropright</span><em class="ni ni-chevron-right icon"></em> </button> <div class="dropdown-menu"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something</a></li> <li><hr class="dropdown-divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <div class="btn-group dropend"> <button type="button" class="btn btn-nmw btn-secondary"> <span>Split dropend</span> </button> <button type="button" class="btn btn-nmw btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <em class="ni ni-chevron-right icon"></em> </button> <div class="dropdown-menu"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something</a></li> <li><hr class="dropdown-divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <div class="btn-group dropstart"> <button type="button" class="btn btn-nmw btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <em class="ni ni-chevron-left icon"></em><span>Dropstart</span> </button> <div class="dropdown-menu dropdown-menu-sm"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something</a></li> <li><hr class="dropdown-divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <div class="btn-group"> <div class="btn-group dropstart" role="group"> <button type="button" class="btn btn-nmw btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <em class="ni ni-chevron-left icon"></em> </button> <div class="dropdown-menu dropdown-menu-sm"> <ul class="link-list-opt"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something</a></li> <li><hr class="dropdown-divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> <button type="button" class="btn btn-nmw btn-secondary"> Split dropstart </button> </div>