How to create a navbar in Bootstrap


Overview

A navbar is a common component in any web application. A navbar can also act like a header which contains a logo of an organization or the brand which represents the website. It also contains the navigation part of the website through which we can navigate through a part of the website directly. To make a navigation bar using bootstrap can be achieved by integrating some of the predefined navbar classes to a nav element which will slightly help us to build a navbar.

There are some predefined bootstrap classes that must and will provide a shape to our navbar. These classes are −

  • navbar

  • navbar-brand

  • nav-item

  • nav-link

  • navbar-collapse

  • collapse

Content Delivery Network (CDN) Links

Add this CDN link to make use of the classes and components of the bootstrap.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.mi n.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHt vPp" crossorigin="anonymous">
<script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bund le.min.js” integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+Brx E/N" crossorigin="anonymous"></script>

Algorithm

Step 1 − Create a HTML boilerplate on your text editor.

Step 2 − Add the bootstrap CDN link to the head tag of the code.

Step 3 − Now to create a navbar, create a parent nav element with the class name as navbar, navbar-expand. We are creating a navbar for dark mode so we will add an attribute data-bs-theme to the parent nav element with the value dark.

<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark"></nav>

Step 4 − Create three sections in the navbar for the logo, search bar and signup button.

Step 5 − Create the first section and define the class name as navbar-brand and insert the image tag in it.

<div>
   <a class="navbar-brand" href="#">
      <img src="#" alt="Bootstrap" width="150">
   </a>
</div>

Step 6 − Create a second section for the search bar and course dropdown box.

<div class="collapse navbar-collapse" id="navbarSupportedContent">
   <input class="form-control rounded-end-0 border-end-0 " type="search" placeholder="Search articles here..." aria-label="Search">
   <div class="dropdown me-3">
      <button class="btn btn-secondary dropdown-toggle rounded-start-0" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Courses </button>
      <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#">Artificial Intelligence</a></li>
         <li><a class="dropdown-item" href="#">Machine Learning</a></li>
         <li><a class="dropdown-item" href="#">Crypto Currency</a></li>
         <li><a class="dropdown-item" href="#">Metaverse</a></li>
      </ul>
   </div>
</div>

Step 7 − Create a third section for the signup button.

<button class="btn btn-success" type="submit">SignUp</button>

Step 8 − The navbar is created successfully and can be viewed on the browser.

Example

In this example we will build a navbar using the bootstrap. In the navbar we will create the section for the logo, a search bar in which a user can search for the latest or past published articles, a dropdown box for the number of courses and a signup button.

<html>
<head>
   <title>Bootstrap Navbar</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</head>
<body>
   <nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
      <div class="container-fluid d-flex align-items-center justify-content-between">
         <div>
            <a class="navbar-brand" href="#">
               <img src="https://www.tutorialspoint.com/images/logo-w.png" alt="Bootstrap" width="150">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <input class="form-control rounded-end-0 border-end-0 " type="search" placeholder="Search articles here..." aria-label="Search">
            <div class="dropdown me-3">
               <button class="btn btn-secondary dropdown-toggle rounded-start-0" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Courses </button>
               <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Artificial Intelligence</a></li>
                  <li><a class="dropdown-item" href="#">Machine Learning</a></li>
                  <li><a class="dropdown-item" href="#">Crypto Currency</a></li>
                  <li><a class="dropdown-item" href="#">Metaverse</a></li>
               </ul>
            </div>
         </div>
         <button class="btn btn-success" type="submit">SignUp</button>
      </div>
   </nav>
</body>
</html>

The given below image shows a navbar which is built using navbar, with the functioning of search articles on the web page and containing some navlink in the dropdown of the courses which will redirect us to that particular page of a course on which a user clicks, with a signup and login functionality.

Algorithm

Step 1 − Create a HTML boilerplate on your text editor.

Step 2 − Add the bootstrap CDN link to the head tag of the code.

Step 3 − Create a parent container with the class name as navbar and navbar-expand.

<nav class="navbar navbar-expand-lg bg-body-tertiary"></nav>

Step 4 − Now insert the child div in it with a logo name and define the class name as navbar-brand. Insert the logo link in the src attribute of the image and set the width of the image.

<a class="navbar-brand" href="#">
   <img src="" alt="Bootstrap">
</a>

Step 5 − To create a bootstrap hamburger icon for a responsive menu refer to this code and attribute which will help you to make a ham icon menu

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
</button>

Step 6 − Create the menu which will be shown on the navbar, and to make this menu to be seen with the ham icon during mobile mode use the class collapse and navbar-collapse.

<div class="collapse navbar-collapse" id="navbarSupportedContent">
   <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
   <form class="d-flex" role="search">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
         <li class="nav-item">
            <a class="nav-link active fw-semibold" aria-current="page" href="#">Home</a>
         </li>
         <li class="nav-item">
            <a class="nav-link fw-semibold" href="#">About</a>
         </li>
         <li class="nav-item">
            <a class="nav-link fw-semibold" href="#">Services</a>
         </li>
      </ul>
      <button class="btn btn-success" type="submit">SignUp</button>
   </form>
</div>

Example

In this example we have created a simple basic navbar which is common for all types of web application. In which we had created a navbar with four sections as it is a full responsive navbar which contains the hamburger icon on viewing in mobile mode. It also contains some navigation links such as home, about, services with a sign up button.

<html>
<head>
   <title>Bootstrap Navbar</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
</head>
<body>
   <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
         <a class="navbar-brand" href="#">
            <img src="https://www.tutorialspoint.com/images/logo.png" alt="Bootstrap" width="150">
         </a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
            <form class="d-flex" role="search">
               <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                     <a class="nav-link active fw-semibold" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link fw-semibold" href="#">About</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link fw-semibold" href="#">Services</a>
                  </li>
               </ul>
               <button class="btn btn-success" type="submit">SignUp</button>
            </form>
         </div>
      </div>
   </nav>
</body>
</html>

The given image below shows the basic view of navbar which is created using bootstrap, which contains a brand logo, menu icon and a signup button. When a user clicks on any menu icon option it redirects the user to that particular page.

Conclusion

In the older version if we want to make a navbar dark or light mode then we have to use the class as navbar-dark or navbar-light respectively but now these are not used as class, so in place of these class to make a dark or light navbar use an attribute data-bs-theme and set its value as dark and for light navbar it's the default one. To make the navbar responsive there is only a class that is navbar-expand which makes our navbar to be viewed on any screen.

Updated on: 11-Apr-2023

821 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements