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.
<!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/bootstrap@4.6.0/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<h1> w3wiki 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/bootstrap@4.6.0/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:
How to Add Headers inside the Dropdown Menu in Bootstrap ?
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.
Table of Content
- Using HTML and CSS only
- Utilizing JavaScript and jQuery
- Using Bootstrap 5’s dropdown group component
Contact Us