Navbar – Bootstrap

Demo

Here is a demo of the navbar in Bootstrap 4.

Here is a demo of the navbar in Bootstrap 5.

You can click the hamburger menu button to see the navbar open and close. For the best viewing experience, click the Edit on CodePen button on the upper righthand corner of the Pen to open it in a new tab. This will let you see the full navbar.

Summary

Bootstrap has a handy navbar component you can use on your site. Here is the code for the navbar from Bootstrap 4.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>

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

   <div class="collapse navbar-collapse" id="navbarNav">
     <ul class="navbar-nav">
       <li class="nav-item active">
         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Features</a>
       </li>
       <li class="nav-item">
         <a class="nav-link" href="#">Pricing</a>
       </li>
       <li class="nav-item">
         <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
       </li>
     </ul>
   </div>
 </nav>

Here is the code for the navbar from Bootstrap 5. One difference is that this navbar has a div with the class container-fluid wrapping everything inside the nav element.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>

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

     <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav">
         <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="#">Features</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Pricing</a>
         </li>
         <li class="nav-item">
           <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
         </li>
       </ul>
     </div>
   </div>
 </nav>

Details

You can add or remove the list items depending on how many links you need in your navbar.

To see all of the varieties of navbars available, visit the navbar page in the Bootstrap docs.

Classes

You can add or change the classes on the nav element to get different behavior.

If you change navbar-expand-lg in the example above to navbar-expand, the navbar won’t collapse on small screens.

If you delete navbar-expand-lg and don’t replace it with a different navbar-expand-* class, then it will always be collapsed.

Exercises

Recreate the HTML code from the Demo section in your index.html file. You can copy and paste the code since it’s a large component.

Back to: Bootstrap Reference > Bootstrap Components