How to Create a Top Navigation Bar in Bootstrap 5 | Bootstrap Tutorial in 2023

1 min 21 sec

Bootstrap is a popular front-end framework that can help you create beautiful and responsive websites quickly and easily. In this tutorial, we'll show you how to create a top navigation bar using Bootstrap 5.

Final Output

Step 1: Set up your HTML file

First, create a new HTML file and add the necessary Bootstrap and CSS files. Here's an example:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Bootstrap 5  Navigation Bar </title>
  </head>
  <body>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

  
  </body>
</html>

Step 2: Create the navigation bar

Next, add the navigation bar into <body> tag of your HTML file. Here's an example of a basic navigation bar:

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand Name</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">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Courses
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">CSS Tutor</a></li>
            <li><a class="dropdown-item" href="#">Html coding for website</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Java scripting tutorial </a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

This navigation bar consists of a brand logo or name, a hamburger menu button, and a list of links. The navbar-expand-lg class makes the navigation bar responsive and collapse into a hamburger menu on smaller screens.

Step 3: Customize the navigation bar

You can customize the navigation bar by adding your own styles or Bootstrap classes. Here are a few examples:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

Change the background color to dark:

Final Output

I hope you got the solid understanding about how to create a top naviagtion bar in bootstrap 5.

Previous Next

NEWSLETTER

Coding Bytes by Codzify

Welcome to Coding Bytes, your weekly source for the latest coding tutorials and insights in small byte sized content.

Join 798+ Subscribers

Subscribe on LinkedIn

Monetize your Passion Today!

Join Codzify Affiliate Program, Earn 30% Commission on Course Sales, Get ₹449.7 or $5.41 per course Sale! No Follower Requirement. Monetize Your Passion Today!