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 aim is to align the dropdown menu and search box in a straight line.
Approach
- The
<head>section includes meta tags for character encoding and viewport settings, linking to Bootstrap and Font Awesome CSS libraries for styling, and jQuery, Popper.js, and Bootstrap JavaScript libraries for functionality. - The
<nav>element initializes a dark-themed Bootstrap navigation bar containing the website title "Geeks For Geeks." - Inside the navigation bar, an unordered list is used to align navigation items to the right.
- The first list item creates a dropdown menu labeled "Courses" with two items, "Live courses" and "Online courses," displayed when the dropdown is toggled.
- The second list item contains a text input field for search functionality, providing a placeholder text "Search..".
Example 1: We will create a navigation bar and create a dropdown menu and a search box, which will initially not appear in a straight line. We can use the unordered list "ul" of HTML structure which is in the form of a list.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<!-- Bootstrap CSS library -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity=
"sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<!-- jQuery library -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<h5 class="navbar-brand">Geeks For Geeks</h5>
<ul class="navbar nav ml-auto">
<!-- Dropdown list -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle"
data-toggle="dropdown" href="#"
role="button" aria-haspopup="true"
aria-expanded="false"
style="color:white;">
Courses
</a>
<div class="dropdown-menu">
<a class="dropdown-item"
href="#">Live courses
</a>
<a class="dropdown-item"
href="#">Online courses
</a>
</div>
</li>
<li>
<!-- Search Box -->
<input type="text" placeholder="Search..">
</li>
</ul>
</nav>
</body>
</html>
Output:
Example 2: The example shows how to set dropdown and search box in same line using Bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<!-- Bootstrap CSS library -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity=
"sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<!-- jQuery library -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<h2 align="Center" style="color:green;">
Dropdown menu and search box
without navigation bar
</h2>
<ul class="navbar nav ml-auto"
style="color:white;background-color:green">
<!-- Dropdown list -->
<li>
<a class="nav-link dropdown-toggle"
data-toggle="dropdown" href="#"
role="button" aria-haspopup="true"
aria-expanded="false"
style="color:white;">
Courses
</a>
<div class="dropdown-menu">
<a class="dropdown-item"
href="#">Live courses
</a>
<a class="dropdown-item"
href="#">Online courses
</a>
</div>
<!-- Search Box -->
<li>
<input class="form-control
form-control-sm mr-3 w-75"
type="text" placeholder="Search"
aria-label="Search">
</li>
</li>
</ul>
</body>
</html>
Output:
