How to Add Headers inside the Dropdown Menu in Bootstrap ?
Last Updated :
17 Apr, 2024
Drop-down menus are a common element used in web development to provide users with a list of options. Adding headers inside a drop-down menu can improve its organization and usability. This means to add headers inside the dropdown menu, use the .dropdown-header class in Bootstrap.
Using HTML and CSS only
To add headers inside the dropdown menu, use the dropdown-header class in Bootstrap. so you can try the following code to implement the dropdown-header class in Bootstrap.
Example: This approach uses HTML utilizes <button> for dropdown activation and <ul> for the menu items. the CSS styles the dropdown to show/hide on hover/focus and positions it below the button.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class="container">
<h2>geeksforgeeks</h2>
<p>The following are the geeksforgeeks dropdown properties:</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle"
type="button"
data-toggle="dropdown">Dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu bg-light">
<li class="dropdown-header text-primary">DSA course</li>
<li><a class="dropdown-item"
href="#">Practice Section</a></li>
<li><a class="dropdown-item"
href="#">Career</a></li>
<li><a class="dropdown-item"
href="#">Menu</a></li>
<div class="dropdown-divider"></div>
<li class="dropdown-header text-primary">Playlist</li>
<li><a class="dropdown-item"
href="#">Interview Preparation</a></li>
<li><a class="dropdown-item"
href="#">STL Concept</a></li>
</ul>
</div>
</div>
</body>
</html>
Output:
Utilizing JavaScript and jQuery
This method involves using JavaScript and jQuery to dynamically generate drop-down menu items with headers.but JavaScript can manipulate the DOM to insert header elements among the drop-down items.It allows for flexible and dynamic manipulation of dropdown content based on user interactions or data changes.
Example: It dynamically appends items and headers to the dropdown menu using jQuery's append() method, creating distinct sections.Headers are represented by <div class="header"> elements, while menu items are <a class="dropdown-item"> elements.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Dropdown with Headers - JavaScript/jQuery</title>
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<h1> geeksforgeeks inside headers</h1>
<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>
<div class="dropdown-menu"
aria-labelledby="dropdownMenuButton">
</div>
</div>
<!-- Bootstrap JS -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function () {
// Code for the first dropdown menu
$('.dropdown-menu')
.append('<div class="dropdown-header bg-primary text-white">Header 1</div>');
$('.dropdown-menu')
.append('<a class="dropdown-item item" href="#">DSA course</a>');
$('.dropdown-menu')
.append('<a class="dropdown-item item" href="#">practice section</a>');
$('.dropdown-menu')
.append('<div class="dropdown-header bg-primary text-white">Header 2</div>');
$('.dropdown-menu')
.append('<a class="dropdown-item item" href="#">career</a>');
$('.dropdown-menu')
.append('<a class="dropdown-item item" href="#">Action 4</a>');
});
</script>
</body>
</html>
Output:
Using Bootstrap 5's dropdown group component
With Bootstrap 5, you can use the dropdown group component to create dropdown menus with headers. This approach is more streamlined as it utilizes Bootstrap's built-in functionality. The code defines a dropdown menu with headers and menu items using Bootstrap's dropdown group classes, making it easy to create distinct sections within the dropdown.
For Example: "Bootstrap's dropdown menu utilizes classes such as dropdown and dropdown-menu, with headers designated by <h6 class="dropdown-header">. Menu items are <a class="dropdown-item">, and section dividers are <hr class="dropdown-divider">."
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown with Headers - Bootstrap 5</title>
<!-- Bootstrap CSS -->
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<br>
<h2>Geeksforgeek inside headers</h2>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-bs-toggle="dropdown"
aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu"
aria-labelledby="dropdownMenuButton">
<li>
<h6 class="dropdown-header">Header 1</h6>
</li>
<li><a class="dropdown-item"
href="#">Action 1</a></li>
<li><a class="dropdown-item"
href="#">Action 2</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<h6 class="dropdown-header">Header 2</h6>
</li>
<li><a class="dropdown-item"
href="#">Action 3</a></li>
<li><a class="dropdown-item"
href="#">Action 4</a></li>
</ul>
</div>
<!-- Bootstrap JS -->
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Output:
Similar Reads
How to open dropdown menu on hover in Bootstrap ?
Here is the task to open the dropdown menu on hover in Bootstrap. The dropdown on mouseover can be done using the following methods. Using the jQuery hover() method: It is used to specify two functions to start when mouse pointer move over the selected element. Syntax: $(selector).hover(Function_in,
3 min read
How to add dropdown search bar in Bootstrap?
A dropdown search bar in Bootstrap combines a text input field with a dropdown menu, providing users with options to select from while allowing them to input custom search queries. It enhances user experience by offering both flexibility and convenience.Preview of final output: Let us have a look at
2 min read
How to remove arrow in dropdown in Bootstrap ?
Dropdowns are one of the important components that are an integral part of any web application. Bootstrap provides its own interactive version of this component. Bootstrap dropdowns are toggled by clicking, not hovering as it was an intentional design decision. To use Dropdowns in a web project, inc
2 min read
How to create a dropdown menu in Bootstrap ?
A dropdown menu offers a list of alternatives when clicked or hovered on, which is a clean method of providing a list of alternatives as only one option is displayed initially onto the screen. Drop-down menus are used in almost all types of software nowadays to show sub-options of the option. Step 1
2 min read
How to Add a Image to React Bootstrap dropdown ?
In this article, we will see how to add an image to the React Bootstrap dropdown. It is a React-based implementation of the Bootstrap components. Dropdown Component provides a way to display lists of links or more actions within a menu when clicked over it. Steps to Create React Application and Inst
3 min read
How to Make Menu Dropdown on Hover using Bootstrap ?
Menu Dropdown on Hover using Bootstrap involves customizing Bootstrap's dropdown component to display menus when hovering over the trigger, not clicking. This is achieved by modifying CSS classes, such as adding "dropdown" and "dropdown-menu" to respective elements, providing a more intuitive user e
4 min read
How to set dropdown and search box in same line using Bootstrap?
A dropdown menu is a type of menu, by using the dropdown menu user can select something from the given predefined set. It is a toggleable menu, which means it appears when the user clicks on the menu. A search box is a type of box in which you can write the string that you want to search. The main a
3 min read
How to create a menu using navbar-inverse in Bootstrap ?
In this article, we will learn how to create a menu using the navbar-inverse in Bootstrap & will also understand its implementation through the example. The menu bar is a very important part while making a navigation bar for the website. We can create a menu bar along with inverse the color of t
5 min read
How to use bootstrap-select for dropdown?
Bootstrap Select is a form control that shows a collapsible list of different values that can be selected. This can be used for displaying forms or menus to the user.ApproachThere are only some style properties that can be applied to the <option> component. This is because this sort of compone
2 min read
Bootstrap 5 Dropdowns Menu content Headers
Bootstrap 5 Dropdowns Menu content Headers are used to add a header/title to the menu in the dropdown. This can help the user to segregate drop-down options into categories. Bootstrap 5 Dropdowns Menu content Headers Class: dropdown-header: This class is used for creating a dropdown header. Syntax:
2 min read