In this tutorial, you are going to learn step by step, how to create a responsive bootstrap navbar with dropdown Menu. Bootstrap is the framework of the CSS that saves us from writing lengthy codes to design beautiful websites. As we all know the Navbar is inevitable part of any website and helps us to navigate to the different contents of a website. Creating a Navbar with Dropdown in Bootstrap is quite easy. Let’s see step by step process to create a Navbar with Dropdown:

Insert  the Bootstrap CDN in the HTML page

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Explanation: Copy the above Bootstrap CNDcode inside the <head> tag in your HTML document. It will serve the CSS, Javascript, and images from the remote servers using the Content Delivery Network so that you write fewer codes to create beautiful designs in the Webpages.

Create the Navbar Background

<nav class="navbar navbar-expand-md navbar-dark">
</nav>

Explanation: To create the background of the Navbar, <nav> tag with class .navabar is used. Class ,navbar-expand-sm or .navbar-expand-md or .navbar-expand-lg is used to make the navbar responsive as per the kind of Devices. Class .navbar-dark is used to provide a dark color to the Navbar. However, the other classes like .Navbar-light, .navbar-transparent, .navbar-primary, .navbar-success etc can also be given to change the colors that are predefined in the Bootstrap.

Insert the Brand Name or Logo in the Navbar

<nav class="navbar navbar-expand-md navbar-dark">
<a href="#" class="navbar-brand">BRAND NAME</a>
 </nav>

Output:

navbar logo

Explanation: As the best practice Navbar Logo or Brand Name is always written inside the <a> tag with a class .navbar-brand is assigned to it.

Insert the Menu Inside the Navbar

<nav class="navbar navbar-expand-md bg-dark">
<a href="#" class="navbar-brand">BRAND NAME</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">HOME</a></li>
<li class="nav-item"><a href="#" class="nav-link">HTML</a></li>
<li class="nav-item"><a href="#"  class="nav-link">BOOTSTRAP</a></li>
<li class="nav-item"><a href="#" class="nav-link">PHP</a></li>
<li class="nav-item"><a href="#" class="nav-link">JAVASCRIPT</a></li>

	</ul>
 </nav>

Output:

nav item

Explanation:  To create a menu item in the Navbar, <ul> tag with the class .navbar-nav is used. Inside the <ul> tag <li>is used with the class .nav-item and to provide the link to nav-items, .nav-link is used.

Change the Background Color of the Navbar

<!DOCTYPE html>
 <html> 
 <head> 
 	<title>HTML Bascis</title> 
 	<meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <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.0/js/bootstrap.min.js"></script>
<style>
.navbar-custom{
	
	background-color: #6A36D9 !important;
}
</style>
</head>
<nav class="navbar navbar-custom navbar-expand-md bg-dark">
	<a href="#" class="navbar-brand">BRAND NAME</a>
	<ul class="navbar-nav">
	<li class="nav-item"><a href="#" class="nav-link">HOME</a></li>
	<li class="nav-item"><a href="#" class="nav-link">HTML</a></li>
	<li class="nav-item"><a href="#"  class="nav-link">BOOTSTRAP</a></li>
	<li class="nav-item"><a href="#" class="nav-link">PHP</a></li>
	<li class="nav-item"><a href="#" class="nav-link">JAVASCRIPT</a></li>

		</ul>
	 </nav>
 </head>
<body>
	
</body> 
</html>

Output:

navbar color

Explanation: To change the color of the navbar add one more class named .navbar-custom inside the <nav> tag. Then add the CSS properties in this class inside the <style> tag. Add a background-color: #6A36D9 !important; property in the class .navbar-custom. You may use a desired color of your own as you wish.

Change the font type and font color of the Navbar

<!DOCTYPE html>
 <html> 
 <head> 
 	<title>HTML Bascis</title> 
 	<meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <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.0/js/bootstrap.min.js"></script>
<style >
.navbar-custom{
	
	background-color: #6A36D9 !important;
}
.nav-item a{
font-family: Arial, sans-serif;
font-weight:bold;
color:white;
}

"></style>
</head>
  <nav class="navbar navbar-custom navbar-expand-md bg-dark">
	<a href="#" class="navbar-brand">BRAND NAME</a>
	<ul class="navbar-nav">
	<li class="nav-item"><a href="#" class="nav-link">HOME</a></li>
	<li class="nav-item"><a href="#" class="nav-link">HTML</a></li>
	<li class="nav-item"><a href="#"  class="nav-link">BOOTSTRAP</a></li>
	<li class="nav-item"><a href="#" class="nav-link">PHP</a></li>
	<li class="nav-item"><a href="#" class="nav-link">JAVASCRIPT</a></li>

		</ul>
	 </nav>
 </head>
<body>
	
</body> 
</html>

Output:

nav item color

Explanation: To change the color and font type of the Navbar, use CSS properties in the Selector in CSS nav-item a{} and then add the properties of color, font-weight, font-family etc, properties in it.

Create a Bootstrap navbar with Dropdown

<li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          PHP
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
            <a class="dropdown-item" href="#">Action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
      </li>

Output:

Navbar dropdown

Explanation: Add one more class inside the <li> tag that is .dropdown and inside the <a> tag add one more class along with .nav-item that .dropdwon-toggle and attribute id with value navbardropdown. Also, add an attribute role with value button and an attribute data-toggle with value dropdown inside <a> tag only.

Before an end tag </a> write the link to be used as a dropdown. Then inside a <div> tag and class .dropdown-menu is to be added with an attribute aria-labelledby with a value of the id used previously inside <li> tag that is navbarDropdown2 in our case. Now, inside the <div> tag use <a> tag with class .dropdown-item and then some content into it. To add a divider between the Dropdown items you can use one more <div> tag and class .dropdown-divider into it. In this way a bootstrap Navbar with Dropdown.

Complete Code to create a Bootstrap Navbar with Dropdown

<!DOCTYPE html>
 <html> 
 <head> 
 	<title>HTML Bascis</title> 
 	<meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <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.0/js/bootstrap.min.js"></script>
<style >
.navbar-custom{
	
	background-color: #6A36D9 !important;
}
.nav-item a{
font-family: Arial, sans-serif;
font-weight:bold;
color: white !important;
}
.dropdown-menu{
	background-color: #6A36D9 !important;
}

"></style>
</head>
  <nav class="navbar navbar-custom navbar-expand-md bg-dark">
	<a href="#" class="navbar-brand">BRAND NAME</a>
	<ul class="navbar-nav">
	<li class="nav-item"><a href="#" class="nav-link">HOME</a></li>
	<li class="nav-item"><a href="#" class="nav-link">HTML</a></li>
	<li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          PHP
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
            <a class="dropdown-item" href="#">Action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
      </li>
	<li class="nav-item"><a href="#"  class="nav-link">BOOTSTRAP</a></li>
	<li class="nav-item"><a href="#" class="nav-link">PHP</a></li>
	<li class="nav-item"><a href="#" class="nav-link">JAVASCRIPT</a></li>

		</ul>
	 </nav>
 </head>
<body>
	
</body> 
</html>

 

More from this Blog:

Avatar

By Rahulwebdev

Hello! I am Rahul Raj. A tech blogger and an enthusiastic web developer. Sharing my skills through my blog. Keen to learn various Programming Languages. " Programming is Poetry".