How to create a menu using navbar-inverse in Bootstrap ?

Last Updated : 10 Oct, 2021

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 the menu bar using the Bootstrap navbar-inverse class.

The navbar in Bootstrap contains many classes such as:

.navbar-brand class: This class is used for your company, product, or project name, or any brand name.
.navbar-nav class: This class is used for full-height and lightweight navigation (including support for dropdowns).
.navbar-toggler class: This class is used for the collapse plugin and other navigation toggling behaviors.
.navbar-text class: This class is used for adding vertically centered strings of text.
.collapse.navbar-collapse class: This class is used for grouping and hiding navbar contents by a parent breakpoint.
The flex and spacing utility classes are used for any form controls and actions.

We will understand the above classes & their usage through the example. Let’s see how to implement navbar using Bootstrap.

Step 1: Import the Bootstrap CDN links inside our HTML file.

<!– Bootstrap compiled and minified CSS –> <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css” integrity=”sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu” crossorigin=”anonymous”/> <!– Bootstrap compiled and minified JavaScript –> <script src=”https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js” integrity=”sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd” crossorigin=”anonymous”></script>

Step 2: Add the <nav> tag inside your <body> with the navbar and navbar-default classes inside in it.

<nav class="navbar navbar-default ">
    <!-- content  -->
</nav>

Step 3: Create a <nav> tag with a class name as navbar navbar-default, & inside of <nav> tag, we will create a <div> with class name as “container-fluid”. Now, in order to use the brand logo or name, we will add a class as navbar-brand, and inside it, create a <ul> tag with a class name as “nav navbar-nav”, followed by the list of the item using the<li> tag.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">GeekforGeeks</a>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Web Technology </a></li>
      <li><a href="#">Data Structure</a></li>
      <li><a href="#">Algorithm</a></li>
      <li><a href="#">Competitive Programming</a></li>
      <li><a href="#">Programming Languages</a></li>
    </ul>
  </div>
</nav>

At this stage, we have created a basic navigation bar using Bootstrap. The below code example illustrates the basic navbar in Bootstrap.

Complete Code:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" /> 
    <meta
      name="viewport"
      content="width=device-width,  
               initial-scale=1.0" /> 
    <link rel="stylesheet"
          href= 
"https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity= 
"sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
          crossorigin="anonymous" /> 
  
    <title>GeeksforGeeks Bootstrap Tutorial</title> 
  </head> 
  
  <body> 
    <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
        <a class="navbar-brand" href="#">GeekforGeeks</a> 
        <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">Web Technology </a></li> 
          <li><a href="#">Data Structure</a></li> 
          <li><a href="#">Algorithm</a></li> 
          <li><a href="#">Competitive Programming</a></li> 
          <li><a href="#">Programming Languages</a></li> 
        </ul> 
      </div> 
    </nav> 
  </body> 
</html>

Output:

Simple Navigation Bar in Bootstrap

From the above output, we can see that the menu-bar is having a white background and if we need to change the background to black and other text content to white, we can simply add the ‘.navbar-inverse’ class in the <nav> tag as shown below.

<nav class="navbar navbar-default navbar-inverse">
   <!-- Content  -->
</nav>

Example: This example illustrates the use of the .navbar-inverse class for changing the background to black in Bootstrap.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" /> 
    <meta
      name="viewport"
      content="width=device-width,  
               initial-scale=1.0" /> 
    <link rel="stylesheet"
            href= 
"https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
            integrity= 
"sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
            crossorigin="anonymous"  /> 
    <title>GeeksforGeeks Bootstrap Tutorial</title> 
  </head> 
  
  <body> 
    <nav class="navbar navbar-default navbar-inverse"> 
      <div class="container-fluid"> 
        <a class="navbar-brand" href="#">GeekforGeeks</a> 
        <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">Web Technology </a></li> 
          <li><a href="#">Data Structure</a></li> 
          <li><a href="#">Algorithm</a></li> 
          <li><a href="#">Competitive Programming</a></li> 
          <li><a href="#">Programming Languages</a></li> 
        </ul> 
      </div> 
    </nav> 
  </body> 
</html>

Output:

After adding navbar-inverse, the navbar turns black

As you can clearly see from the above output, the color is changed to black and fonts become white. Thus, we have successfully created a basic navigation bar using Bootstrap using the “navbar-inverse” class. Now, we can also add several features like dropdowns and search options inside our navigation bar.

In order to make a drop-down menu, we will be using the below code:

<div class="dropdown">
 <button
   class="btn btn-default dropdown-toggle"
   type="button"
   id="dropdownMenu1"
   data-toggle="dropdown"
   aria-haspopup="true"
   aria-expanded="true">
   Dropdown
   <span class="caret"></span>
 </button>
 
 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
   <li><a href="#">Link1</a></li>
   <li><a href="#">Link2</a></li>
   <li><a href="#">Link3</a></li>
 </ul>
</div>

For placing the search option to the right in the navbar, we will use the below code snippet:

<form class="navbar-form navbar-right" role="search">
  <div class="form-group">
    <input type="text" class="form-control" 
             placeholder="Search" />
  </div>
  <button type="submit" 
          class="btn btn-default">Submit
  </button>
</form>

At this point, we have made the updated navbar code after adding more features like drop-down and search bar.

Complete Code:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <link rel="stylesheet"
            href= 
"https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
            integrity= 
"sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
            crossorigin="anonymous" /> 
  
    <title>GeeksforGeeks Bootstrap Navbar Tutorial</title> 
  </head> 
  
  <body> 
    <nav class="navbar navbar-default navbar-inverse"> 
      <div class="container-fluid"> 
        <a class="navbar-brand" href="#">GeeksforGeeks</a> 
        <ul class="nav navbar-nav"> 
          <li class="active"><a href="#">Data Structure</a></li> 
          <li><a href="#">Algorithm</a></li> 
          <li><a href="#">Competitive Programming</a></li> 
          <li class="dropdown"> 
            <a
              href="#"
              class="dropdown-toggle"
              data-toggle="dropdown"
              role="button"
              aria-haspopup="true"
              aria-expanded="false"> 
                  Web Technology<span class="caret"></span> 
            </a> 
            <ul class="dropdown-menu"> 
              <li> 
                <a href="#">HTML</a> 
              </li> 
              <li> 
                <a href="#">CSS</a> 
              </li> 
              <li> 
                <a href="#">JavaScript</a> 
              </li> 
            </ul> 
          </li> 
        </ul> 
        <form class="navbar-form navbar-right"> 
          <div class="form-group"> 
            <input type="text" 
                   class="form-control" 
                   placeholder="Search" /> 
          </div> 
          <button type="submit" 
                  class="btn btn-default">Submit 
          </button> 
        </form> 
      </div> 
    </nav> 
  </body> 
</html>

Output:

Navbar after adding features like dropdown and search option

NOTE: The class “.navbar-inverse” is now outdated. It is used in bootstrap to make the navbar dark till version 3.3.7. Now, the class “.bg-dark” is used to darken the components in the current version 5.0.0 & the previous version 4.6.1.