In bootstrap 5, Nav Bar is used to connect and link all the web pages related to a website and a user can move between pages easily. Navigation bar is a very important component of a website that contains a brand logo, page names and their links, and a search box according to user requirements.

This article give you a detail knowledge about

How to create a navbar

To create a navbar use, .navbar class and to align the menu in a row use .navbar-expand-xxl/lg/md/sm. In order to choose between light or dark mood use .navbar-light/dark and to give a background color to a navbar use .bg-light.

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image1-48.png" data-lazy- height="160" src="data:image/svg xml,” width=”744″>

Code:

<div class=“container mb-5”>


 <h3 class=“py-3 text-center”>Bootstrap 5 Navbar</h3>


   <div class=“row py-3”>


      <div class=“col”>


         <nav class=“navbar navbar-expand-md navbar-light bg-light”>


            <a href=“#” class=“navbar-brand”>Cubator 1ne</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”>About Us</a></li>


               <li class=“nav-item”><a href=“” class=“nav-link”>Gallery</a></li>


               <li class=“nav-item”><a href=“” class=“nav-link”>Contact Us</a></li>


           </ul>


         </nav>


       </div>


     </div>


   </div>


 </div>

This is how you create a navbar in bootstrap 5.

Navbar with dropdown menu

To create a navbar with dropdown menu use .dropdown class with .nav-item class in

  • tag, take a
    tag with .dropdown-menu class, and wrap it around anchor tag with the class .dropdown-item. To show the dropdown menu use .dropdown-toggle class with .nav-link class and also use data-bs-toggle=”dropdown” attribute on the tag which contains .nav-link class.

    <img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image3-43.png" data-lazy- height="264" src="data:image/svg xml,” width=”753″>

    Code

    <nav class=“navbar navbar-expand-md navbar-light bg-light”>


      <    a href=“#” class=“navbar-brand”>Cubator 1ne</a>


        <ul class=“navbar-nav mr-auto”>


           <li class=“nav-item”><a href=“” class=“nav-link”>Home</a></li>


              <li class=“nav-item”><a href=“” class=“nav-link”>About Us</a></li>


                 <li class=“nav-item dropdown”>


                    <a href=“” class=“nav-link dropdown-toggle” data-bs-toggle=“dropdown”>Gallery</a>


                         <div class=“dropdown-menu”>


                            <a href=“” class=“dropdown-item”>Tour Pics</a>


                            <a href=“” class=“dropdown-item”>Annual Dinner</a>


                            <a href=“” class=“dropdown-item”>Prize Distribution</a>


                         </div>


              </li>


           <li class=“nav-item”><a href=“” class=“nav-link”>Contact Us</a></li>


        </ul>


    </nav>

    This is how a navbar with a dropdown menu is created.

    Navbar with inline form

    To create a navbar with inline form, use tag with the class .inline-form and wrap it around an tag with the class .form-control and add a button using a

    • About the author

    <img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg625e23ed7d938.jpg" height="112" src="data:image/svg xml,” width=”112″>

    Shehroz Azam

    A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.

    Show Comments