Bootstrap Navbar (Navigation Bar)

In bootstrap, Navbar is a navigation header, and it helps to navigate through the pages of the website. By default, the navbars are responsive so, based on the device screen size, the navbars will extend or collapse and toggleable to give the ability to navigate.

Bootstrap Create NavBar

To create a navbar in bootstrap, you need to add .navbar class, .navbar-expand{-sm|-md|-lg|-xl} class for responsive collapsing and color scheme classes to <nav> element. After that, create navbar links using <li> element with .nav-item class followed by <a> element with .nav-link class inside of <ul> element with .navbar-nav class.

 

Live Preview <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <ul class="navbar-nav">
       <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
       </li>
       <li class="nav-item">
          <a class="nav-link" href="#">Tutorials</a>
       </li>
       <li class="nav-item">
          <a class="nav-link" href="#">Articles</a>
       </li>
    </ul>
</nav>

The above example will return the result as shown below.

 

Bootstrap navbar example result

 

As discussed, the bootstrap navbars are responsive so, the above horizontal navbar will become vertical on small screen devices.

 

In case, if you want to create vertical navbars in bootstrap, remove responsive collapsing .navbar-expand{-sm|-md|-lg|-xl} class from <nav> element.

 

Live Preview <nav class="navbar navbar-light bg-light">
   <ul class="navbar-nav">
     <li class="nav-item">
       <a class="nav-link active" href="#">Home</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Tutorials</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Articles</a>
     </li>
   </ul>
</nav>

The above example will return the result as shown below.

 

Bootstrap Navbar with Brand / Logo

To highlight brand name or logo in the navbar, add .navbar-brand class to the respective element like as shown below.

 

Live Preview <nav class="navbar navbar-expand-sm navbar-light bg-light">
   <a class="navbar-brand" href="#">Tutlane</a>
   <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Tutorials</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Articles</a>
      </li>
   </ul>
</nav>

If you observe the above example, we added .navbar-brand class to highlight the brand (Tutlane) name.

 

The above example will return the result as shown below.

 

Bootstrap navbar with brand example result

 

In case if you want to highlight the brand logo in the navbar, add .navbar-brand class on images like as shown below.

 

Live Preview <nav class="navbar navbar-expand-sm navbar-light bg-light">
   <a class="navbar-brand" href="#">
     <img src="https://www.tutlane.com/images/categorylogo/bootstrap.png" width="30" height="30" /> Bootstrap</a>
     <ul class="navbar-nav">
        <li class="nav-item">
           <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Tutorials</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Articles</a>
        </li>
     </ul>
</nav>

The above example will return the result as shown below.

 Bootstrap navbar with brand logo example result

Bootstrap Colored Navbars

By using background color classes (.bg-light, .bg-dark, .bg-primary, .bg-secondary, .bg-success, .bg-info, .bg-warning, .bg-danger), navbar classes (.navbar-light, .navbar-dark) and custom background styles, we can change the text and background color of navbars based on our requirements.

 

Live Preview <!--NavBar1-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
....
</nav>
<!--NavBar2-->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
....
</nav>
<!--NavBar3-->
<nav class="navbar navbar-expand-sm navbar-dark bg-danger">
....
</nav>
<!--NavBar4-->
<nav class="navbar navbar-expand-sm navbar-light" style="background-color: #e3f2fd;">
....
</nav>

If you observe the above example, we used .navbar-light and .navbar-dark classes to change the navbar text color. Here, the .navbar-light class is useful to show the text color in black and .navbar-dark is useful to show the text color in white. So, it’s better to use .navbar-light class with light background colors and .navbar-dark class with dark background colors.

 

The above example will return the result as shown below.

 

Bootstrap colored navbars example result

Bootstrap Navbar with Dropdown Menu

In bootstrap navbars, we can include dropdown menus based on our requirements.

 

Live Preview <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
   <a class="navbar-brand" href="#">Tutlane</a>
     <ul class="navbar-nav">
       <li class="nav-item">
         <a class="nav-link" href="#">Home</a>
       </li>
       <!--Dropdown-->
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Tutorials</a>
         <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Microsoft</a>
            <a class="dropdown-item" href="#">JAVA</a>
            <a class="dropdown-item" href="#">Database</a>
         </div>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Articles</a>
       </li>
     </ul>
</nav>

The above example will return the result as shown below.

 

Bootstrap navbar with dropdown menu example result

Bootstrap Navbars with Forms

In bootstrap, we can add form (<form>) controls such as textbox, button, etc. inside of navbar by adding .form-inline class to <form> element.

 

Live Preview <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
   <a class="navbar-brand" href="#">Tutlane</a>
     <ul class="navbar-nav mr-auto">
       <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
       </li>
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Tutorials</a>
        <div class="dropdown-menu">
           <a class="dropdown-item" href="#">Microsoft</a>
           <a class="dropdown-item" href="#">JAVA</a>
           <a class="dropdown-item" href="#">Database</a>
        </div>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Articles</a>
       </li>
     </ul>
     <form class="form-inline">
        <input class="form-control mr-sm-2" type="search" placeholder="Search">
        <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
     </form>
</nav>

If you observe the above example, we created a form by adding .form-inline with required input controls such as textbox and button in the navbar.

 

The above example will return the result as shown below.

 

Bootstrap navbar with form controls example result

Bootstrap Collapsible Navbar

Generally, in small screen devices, we will hide the navigation menu and show the button to reveal the navigation menu when clicked on it.

 

To achieve this, you need to implement a collapsible navigation bar for that create a button with .navbar-toggler class and add data-toggle="collapse" and data-target="#navbarContent" attributes. After that, you need to create a <div> element with .collapse-navbar-collapse class and id attribute to wrap the navbar content inside of it. The <div> element id value needs to match with the data-target attribute value of the button.

 

Live Preview <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <a class="navbar-brand" href="#">Tutlane</a>
   <!--Button Toggler-->
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
   </button>
   <!--Navbar Links-->
   <div class="collapse navbar-collapse" id="Div1">
      <ul class="navbar-nav">
         <li class="nav-item">
           <a class="nav-link" href="#">Home</a>
         </li>
         <li class="nav-item dropdown">
           <a class="nav-link" href="#">Tutorials</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Articles</a>
         </li>
      </ul>
   </div>
</nav>

The above example will return the result as shown below.

 

Bootstrap collapsible navbar example result

Bootstrap Fixed Navbar

In bootstrap, we have different classes like .fixed-top, .fixed-bottom, .sticky-top to make the navigation bar pinned on the top or bottom of the page in a fixed position.

 

By using .fixed-top class, you can make the navigation bar fixed at the top of the page.

 

Live Preview <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
   <!-- Navbar Content -->
</nav>

To make the navigation bar fixed at the bottom of the page, you need to use .fixed-bottom class.

 

Live Preview <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-bottom">
   <!-- Navbar Content -->
</nav>

Same way, use .sticky-top class to make the navigation bar scrolls with the page until it reaches the top, then stays at the top of the page. 

 

Live Preview <nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
   <!-- Navbar Content -->
</nav>

This is how we can use the bootstrap navbar in our applications to create navigation menu bars based on our requirements.