What is dropdown in Bootstrap 5?
- Dropdowns are used to display links or other information as the mouse clicks on an element like a button, link, etc.
- These are contextual overlays or menus that you use in the navbar, tabs, pill nav, etc.
- An important point to notice in BS 5 is that the toggleable dropdown is opened/closed by clicking and not by hovering the mouse over the button or link, etc. where the dropdown is created. This behavior is designed intentionally in BS5. You may learn about this decision here in detail.
How dropdown is created in BS5?
- Popper is a third-party library that you need to include before the Bootstrap JS library.
- As such dropdowns are built on popper.
- FYI, the purpose of the popper is to detect viewport and dynamic positioning.
- You need to use .dropdown-toggle class and data-bs-toggle = “dropdown” property in a button, link etc. to create a dropdown (please see examples below)
A basic example of Bootstrap 5 dropdown with a button
Try using our dropdown maker tool in Bootstrap 5
Let us start with a basic example of creating a dropdown by using a button. As you click on the button, the dropdown menu opens with a few links.
BS 5 code:
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h1>Bootstrap 5 Dropdown Example</h1> <div class="dropdown"> <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"> Bootstrap Versions </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> </div> </body> </html>
An example of various colored button dropdowns
In this example, we have created different color dropdown buttons by using the available contextual color classes in BS 5.
Code:
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h1>Bootstrap 5 Dropdown various color buttons</h1> <div class="btn-group"> <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown"> Bootstrap Versions </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown"> Bootstrap Versions </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown"> Bootstrap Versions </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Bootstrap Versions </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown"> Bootstrap Versions </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> </div> </body> </html>
Output:
Creating a button dropdown with split button example
For creating a dropdown with split button, you need to use markup for two buttons.
- Outer div refers to the btn-group
- For the first button, you provide the text to be displayed for the button.
- In the second button, use the dropdown-toggle-split class for splitting this button that is adjacent to the first button.
See the complete code below where we created green-colored buttons.
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h1>Bootstrap 5 Split Dropdown</h1> <div class="btn-group"> <button type="button" class="btn btn-success">Bootstrap Versions</button> <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> </div> </body> </html>
Result:
You may specify different colors for both buttons to make the split distinct. See the example and code below:
The code:
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h1>Bootstrap 5 Split Dropdown</h1> <div class="btn-group"> <button type="button" class="btn btn-primary">Bootstrap Versions</button> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> </div> </body> </html>
Large and small size dropdowns example
The above demos show normal normal-sized dropdown. You may create large or small-sized dropdowns for simple or split styles as well.
For that, simply use the .btn-sm for small and .btn-lg classes for large buttons. See an example below where we created all three sizes:
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h1>Bootstrap 5 Dropdown Sizes</h1> <div class="btn-group"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"> Normal Button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-lg btn-primary">Large Button</button> <button type="button" class="btn btn-lg btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> <div class="btn-group"> <button type="button" class="btn btn-warning btn-sm dropdown-toggle" data-bs-toggle="dropdown"> Small Button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> </body> </html>
Result:
Creating a dropdown in upward direction example
In all the above examples, the dropdown menu opened downwards. You may also make a dropdown menu trigger upwards or other directions by using specific classes. For making the menu open above elements, use the .dropup class.
We just added the dropup class along with btn-group class, as shown in the example below:
BS 5 code:
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h1>Bootstrap 5 Dropdown Direction</h1> <br><br><br><br> <div class="btn-group dropup"> <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"> Normal Button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-lg btn-primary">Large Button</button> <button type="button" class="btn btn-lg btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"> <span class="visually-hidden">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-warning btn-sm dropdown-toggle" data-bs-toggle="dropdown"> Small Button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> </body> </html>
Result:
You can see, all three size buttons open the menu up direction.
Dropdown menu towards right direction example
Similarly, you may use the .dropend class to open the menu towards the right of the element. Have a look at the code below:
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h1>Bootstrap 5 Dropdown Direction</h1> <div class="btn-group dropend"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Right Direction </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> </body> </html>
Dropdown towards left direction example
Use the .dropstart class for opening the menu towards the left side of the button or other elements with a dropdown. Have a look:
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h1>Bootstrap 5 Dropdown Direction</h1> <div class="btn-group dropstart"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Left Direction </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> <div class="btn-group dropstart"> <button type="button" class="btn btn-warning btn-sm dropdown-toggle" data-bs-toggle="dropdown"> Small Button </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> </body> </html>
Adding dividers in the dropdown example
To differentiate the menu items in the dropdown, you may use the .dropdown-divider in the <li>. See an example with the code below:
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h1>Bootstrap 5 Dropdown Direction</h1> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Bootstrap Versions </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-tips-tutorials/">Bootstrap 3</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-4/">Bootstrap 4</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="https://www.jquery-az.com/bootstrap-5/">Bootstrap 5</a></li> </ul> </div> </body> </html>
Placing text content in a dropdown example
Not only you may place links in the dropdowns but other content like text without links can also be placed. See an example below:
BS 5 code:
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h1>Bootstrap 5 Dropdown Text</h1> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> Dropdown With Simple text </button> <div class="dropdown-menu p-4 text-muted" style="max-width: 200px;"> <p><strong>Text heading</strong><br> Some example text that's free-flowing within the dropdown menu. </p> <p class="mb-0"> And this is more example text. </p> </div> </div> </body> </html>
An example of a dropdown with anchor text
As mentioned earlier, you may use different elements like buttons, links, dropdowns in the navbar etc.
The following example shows creating a dropdown using anchor text by using <a> tag:
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <h1>Bootstrap 5 Dropdown Anchor</h1> <div class="m-4"> <div class="dropdown"> <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown">Bootstrap Versions</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Bootstrap 3</a> <a href="#" class="dropdown-item">Bootstrap 4</a> <a href="#" class="dropdown-item">Bootstrap 5</a> </div> </div> </div> </body> </html>
Dropdown in navbar example
The following example shows using a dropdown in the navbar. For that, we have different menus, and the dropdown menu is created twice in the example.
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <nav class="navbar navbar-expand-sm navbar-light bg-light"> <div class="container-fluid"> <a href="#" class="navbar-brand">Company/Website Name</a> <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">Home</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Web</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Bootstrap</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Bootstrap 3</a> <a href="#" class="dropdown-item">Bootstrap 4</a> <a href="#" class="dropdown-item">Bootstrap 5</a> <div class="dropdown-divider"></div> <a href="#"class="dropdown-item">Older</a> </div> </li> </ul> <ul class="nav navbar-nav ms-auto"> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Programming</a> <div class="dropdown-menu dropdown-menu-end"> <a href="#" class="dropdown-item">Java</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Pyhton</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">C#</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">C++</a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item">Kotlin</a> </div> </li> </ul> </div> </div> </nav> </div> </body> </html>
For the full documentation, please refer to https://getbootstrap.com/docs/5.0/components/dropdowns/