How do i create Navigation Nav items with bootstrap5

Published October 01, 2021

In this bootstrap5 example we will create a simple navigation items with bootstrap5. To create navigation items with bootstrap we will use nav and nav-item classes.

Let's check simple navigation items with html bootstrap

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- 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 Alert Example</title>
   </head>
   
   <body >

   <div class = "container">
         <h2>Base Nav and Disabled Link</h2>
         <ul class = "nav">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Bootstrap5 Tutorial</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Html Tutorial</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link disabled" href = "#">Sign-In (Disabled)</a>
            </li>
         </ul>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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>

 

Output:

Bootstrap5 Navigation items

 

 

Nav items with Vertical Alignment, Align center and align right side with properties justify-content-center, flex-column, justify-content-end

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- 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 Alert Example</title>
   </head>
   
   <body >

   <div class = "container">
         <h2>Nav Items with Center Aligned </h2>
         <ul class = "nav justify-content-center">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Bootstrap5 Tutorial</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Html Tutorial</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link disabled" href = "#">Sign-In (Disabled)</a>
            </li>
         </ul>
      </div>

   <div class = "container">
         <h2>Nav Items with Right Aligned </h2>
         <ul class = "nav justify-content-end">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Bootstrap5 Tutorial</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Html Tutorial</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link disabled" href = "#">Sign-In (Disabled)</a>
            </li>
         </ul>
      </div> <div class = "container">
         <h2>Nav items with  Vertical Alignment example</h2>
         <ul class = "nav flex-column">
            <li class = "nav-item">
               <a class = "nav-link active" href = "#">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Bootstrap5 Tutorial</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" href = "#">Html Tutorial</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link disabled" href = "#">Sign-In (Disabled)</a>
            </li>
         </ul>
      </div>
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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>

 

output:

Bootstrap5 align nav items

 

 

Nav items with Toogle tabs

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- 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 Alert Example</title>
   </head>
   
   <body >

  <div class = "container">
         <h2>Toggleable Tabs</h2>
         <ul class = "nav nav-tabs" id = "myTab" role = "tablist">
            <li class = "nav-item">
               <a class = "nav-link active" id = "home-tab" data-toggle = "tab"
                  href = "#home" role = "tab" aria-controls = "home"
                  aria-selected = "true">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" id = "aboutus-tab" data-toggle = "tab"
                  href = "#aboutus" role = "tab" aria-controls = "aboutus"
                  aria-selected = "false">Bootstrap5</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" id = "Html Tutorial-tab" data-toggle = "tab"
                  href = "#Html Tutorial" role = "tab" aria-controls = "Html Tutorial"
                  aria-selected = "false">Html Tutorial</a>
            </li>
         </ul>

         <div class = "tab-content" id = "myTabContent">
            <div class = "tab-pane fade show active" id = "home" role = "tabpanel"
               aria-labelledby = "home-tab">Content for Home tab</div>

            <div class = "tab-pane fade" id = "aboutus" role = "tabpanel"
               aria-labelledby = "aboutus-tab">Content for Bootstrap5 tab</div>

            <div class = "tab-pane fade" id = "Html Tutorial" role = "tabpanel"
               aria-labelledby = "Html Tutorial-tab">Content for Html Tutorial tab</div>
         </div>
         <br>

         <h2>Toggleable Pills</h2>
         <ul class = "nav nav-pills mb-3" id = "pills-tab" role = "tablist">
            <li class = "nav-item">
               <a class = "nav-link active" id = "pills-home-tab"
                  data-toggle = "pill" href = "#pills-home" role = "tab"
                  aria-controls = "pills-home" aria-selected = "true">Home</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" id = "pills-aboutus-tab" data-toggle = "pill"
                  href = "#pills-aboutus" role = "tab" aria-controls = "pills-aboutus"
                  aria-selected = "false">Bootstrap5</a>
            </li>
            <li class = "nav-item">
               <a class = "nav-link" id = "pills-Html Tutorial-tab" data-toggle = "pill"
                  href = "#pills-Html Tutorial" role = "tab" aria-controls = "pills-Html Tutorial"
                  aria-selected = "false">Html Tutorial</a>
            </li>
         </ul>

         <div class = "tab-content" id = "pills-tabContent">
            <div class = "tab-pane fade show active" id = "pills-home"
               role = "tabpanel" aria-labelledby = "pills-home-tab">

               Content for Home tab
            </div>

            <div class = "tab-pane fade" id = "pills-aboutus" role = "tabpanel"
               aria-labelledby = "pills-aboutus-tab">

               Content for Bootstrap5 tab
            </div>

            <div class = "tab-pane fade" id = "pills-Html Tutorial" role = "tabpanel"
               aria-labelledby = "pills-Html Tutorial-tab">

               Content for Html Tutorial tab
            </div>
         </div>

      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <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>

 

Output:

Bootstrap5 Tab Nav items

 

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1082 Views