Bootstrap is a popular CSS framework that provides pre-designed UI components, including dropdown menus.
Dropdown menus are used to present a list of options in a compact form. They are widely used in navigation bars, forms, and other user interfaces.
In this guide, we will explore Bootstrap dropdowns in detail and provide code examples to help you get started with using them.
Getting started
To use Bootstrap dropdowns, you will need to include the Bootstrap CSS and JavaScript files in your HTML document.
You can either download them from the Bootstrap website or link to the CDN versions.
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>Dropdown Structure
Bootstrap dropdowns are created using the dropdown class. The dropdown structure consists of a dropdown toggle and a dropdown menu.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>The dropdown toggle is created using a <button> element with the dropdown-toggle class.
The dropdown menu is created using a <div> element with the dropdown-menu class.
The menu items are created using <a> elements with the dropdown-item class.
Note: The data-toggle="dropdown" and aria-haspopup="true" attributes on the toggle button are used to toggle the dropdown menu when the button is clicked.
The aria-labelledby attribute on the dropdown menu is used to associate the menu with the toggle button.
Alignment
By default, the dropdown menu is aligned to the left of the toggle button.
However, you can change the alignment to the right using the dropdown-menu-right class.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<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>Dropdown Headers
You can add headers to your dropdown menu using the .dropdown-header class.
Headers can be used to group menu items and provide additional context.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<h6 class="dropdown-header">Header 1</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<h6 class="dropdown-header">Header 2</h6>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>Dropdown Dividers
You can add dividers to your dropdown menu using the .dropdown-divider class.
Dividers can be used to separate menu items into distinct sections.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>Disabled Menu Items
You can disable menu items by adding the .disabled class to the <a> element. A disabled menu item cannot be clicked.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Disabled action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>Dropdown Variants
Bootstrap provides various styles for dropdowns, which can be applied by adding a class to the toggle button.
For example, you can use the .btn-primary class to style the toggle button as a primary button.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>Dropdown with Forms
You can add a form to a dropdown menu using the <form> element. The form can be used to gather input from the user and submit it to the server.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu p-4" aria-labelledby="dropdownMenuButton">
<form>
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</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="form-check">
<input class="form-check-input" type="checkbox" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>Dropdown Alignment
By default, dropdowns are aligned to the left of the toggle button.
However, you can align the dropdown menu to the right by adding the .dropdown-menu-right class to the dropdown menu.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<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>Conclusion
Dropdowns are a great way to provide additional options and information to the user.
By following the guidelines outlined in this guide, you can create effective dropdowns in Bootstrap.
With its various styles, components, and features, Bootstrap provides a comprehensive toolset for designing and building dropdowns.