Bootstrap5 Tutorial
BS5 Navbar
Previous Page
Next Page

Bootstrap Navbars

Bootstrap navbars have collapsed and expanded features. It works on the basis of the available screen size. Navbar expands features to expand the navbar in the available space at the mentioned breakpoint, while navbar collapse collapses the navbar on small devices.

Bootstrap 5 Basic Horizontal Navbar

Steps To Create a Bootstrap 5 Basic Horizontal Navbar Menu

  • Add .navbar, .navbar-expand{-sm|-md|-lg|-xl} & background color utility class, i.e. (.navbar-light & .bg-light) to the <nav> element's base class.
  • Assign .navbar-nav to <ul> element's base class.
  • Add .nav-item to <li> element's base class.
  • Assign .nav-link to <a> element's base class.

General Syntax 

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <ul class="navbar-nav mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active"  href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" >Disabled</a>
    </li>
  </ul>
</nav>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">Bootstrap Navbar</h2>
  <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <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="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" >Disabled</a>
      </li>
    </ul>
  </nav>
</div><!--/container-->
Try it now

Navbar Brand & Collapsing

Bootstrap .navbar-brand displays brand name or brand logo.

By applying .navbar-brand class on images, It adjusts the image to fit vertically with respect to the navbar.

Navbar: Brand Name

General Syntax 

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <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="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">Bootstrap Navbar</h2>
  <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">sudhakarinfotech</a>
      <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="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
Try it now

Navbar: Brand Logo

Place the brand logo inside the .navbar-brand element.

General Syntax 

      <nav class="navbar navbar-expand-sm navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="brand logo" width="30" height="24" />
    </a>
    <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>
    </ul>
  </div>
</nav>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">Bootstrap Navbar With Brand Logo</h2>
  <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img src="https://picsum.photos/id/1/200/300" alt="brand logo" width="60" height="60" class="rounded-circle" />
      </a>
      <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="#">About</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
<!--/container-->
Try it now

Dropdown Split Buttons

Add .dropdown-toggle-split to the <button> having .dropdown-toggle.It is used for proper spacing around the dropdown caret.

General Syntax 

      <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
Try it now

Source Code 

          <div class="container my-5 text-center">
  <!-- Example split danger button -->
  <div class="btn-group">
    <button type="button" class="btn btn-success">Drodown Menu</button>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
      <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link1</a></li>
      <li><a class="dropdown-item" href="#">Link2 </a></li>
      <li><hr class="dropdown-divider" /></li>
      <li><a class="dropdown-item" href="#">Link3</a></li>
    </ul>
  </div>
</div>
<!--/container-->
Try it now

Source Code : Output

Code Explanation

Please keep in mind that assign an additional .dropdown-toggle-split class to the <button> element base class to make dropdown split buttons.

Navbar: Collapsing

Use collapse concept inside navbar to create collapsing navbar.

General Syntax 

      <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">
      <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="#">Nav Item</a>
        </li>       
      </ul>
    </div>
  </div>
</nav>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">
    Bootstrap Navbar With Collapsing Feature
  </h2>
  <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">
        <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="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>
<!--/container-->
Try it now

Navbar:Vertical Navbar

Steps To Create Vertical Navbar Menu

  • Add .navbar & background color utility class, i.e. (.navbar-light .bg-light) to the <nav> element's base class.
  • Assign .navbar-nav class to <ul> element's base class.
  • Add .nav-item class to <li> element's base class.
  • Assign .nav-link class to <a> element's base class.

General Syntax 

      <nav class="navbar bg-light">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 3</a>
    </li>
  </ul>
</nav>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">Bootstrap Navbar With Collapsing</h2>
  <nav class="navbar bg-light">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</div><!--/container-->
Try it now

Centered Navbar

Add the .justify-content-center class to center the navigation bar.

  • Add .navbar, .navbar-expand-sm, .justify-content-center & background color utility class, i.e. (.navbar-light .bg-light) to the <nav> element's base class.
  • Add .navbar-nav to <ul> element's base class.
  • Add .nav-item to <li> element's base class.
  • Add .nav-link to <a> element's base class.

General Syntax 

      <nav class="navbar navbar-expand-sm bg-light justify-content-center">
  <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#">Link 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
  </ul>
</nav>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">Centered navbar</h2>
  <nav class="navbar navbar-expand-sm bg-light justify-content-center">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 3</a>
      </li>
    </ul>
  </nav>
</div><!--/container-->
Try it now

Navbar:Background Color

To change the navbar background color, use .navbar-dark for dark background color and .navbar-light for light background color.Then customize it, with the background-color utility classes i.e bg-*.

General Syntax 

      <nav class="navbar navbar-dark bg-dark"> </nav>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">Navbar:Background Color</h2>
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <ul class="navbar-nav mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </nav>
  <br />
  <!---->
  <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    <ul class="navbar-nav 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="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </nav>
  <br />
  <nav class="navbar navbar-expand-sm navbar-light">
    <ul class="navbar-nav mb-2 mb-lg-0">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </nav>
</div>
<!--/container-->
Try it now

Navbar With Dropdown

General Syntax 

      <nav class="navbar navbar-expand-md navbar-light bg-light">
  <a href="#" class="navbar-brand">Brand Name</a>
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
    <div class="navbar-nav">
      <a href="#" class="nav-item nav-link active">Home</a>
      <a href="#" class="nav-item nav-link">Profile</a>
      <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Messages</a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">Inbox</a>
          <a href="#" class="dropdown-item">Sent</a>
          <a href="#" class="dropdown-item">Drafts</a>
        </div>
      </div>
    </div>
  </div>
</nav>
Try it now

Source Code 

          <div class="container">
  <h2 class="text-center">Navbar With Dropdown</h2>
  <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="#navbarNavDropdownId" aria-controls="navbarNavDropdownId" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdownId">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuId" data-bs-toggle="dropdown">
              Services
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuId">
              <li><a class="dropdown-item" href="#">Service1</a></li>
              <li><a class="dropdown-item" href="#">Service2</a></li>
              <li><a class="dropdown-item" href="#">Service3</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>
<!--/container-->
Try it now

Search Form With Navbar

General Syntax 

      <nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" />
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Search Form With Navbar</h2>
  <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" />
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <!--/nav-->
</div>
<!--/container-->
Try it now

Navbar Brand With Search Form

General Syntax 

      <nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar Brand</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" />
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">
    Bootstrap Navbar Brand With Search Form
  </h2>
  <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand">Navbar</a>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search"  />
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </nav>
</div>
<!--/container-->
Try it now

Code Explanation

Note:To place <form> element inside navbar, assign .d-flex to the <form> element base class and assign .form-control to the <form> input control.

Navbar With Addon

To place <form> element inside navbar, assign .container-fluid to the <form> element base class and assign .input-group to the form controls container base class. In the end, place the addon inside <span> element and assign .input-group-text to the <span> element base class and also assign .form-control to the input form control base class.

General Syntax 

      <nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" />
    </div>
  </form>
</nav>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Bootstrap Navbar With Addon</h2>
  <nav class="navbar navbar-light bg-light">
    <form class="container-fluid">
      <div class="input-group">
        <span class="input-group-text" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username" />
      </div>
    </form>
  </nav>
</div>
Try it now

Navbar:Text

To place text inside the navbar, write text information inside the <span> element and provide .navbar-text to the <span> element base class.

General Syntax 

      <nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-text">Navbar text</span>
  </div>
</nav>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Bootstrap Navbar With Text</h2>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar Brand</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <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="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
        </ul>
        <span class="navbar-text">Register</span>
        <span class="navbar-text">| Login</span>
      </div>
    </div>
  </nav>
</div>
<!--/container-->
Try it now

Navbar: Container

General Syntax 

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

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Bootstrap Navbar With Container</h2>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
  <hr />
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-md">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>
<!--container-->
Try it now

Navbar: Fixed Top

The navigation bar can also be fixed at the top or at the bottom of the page. A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll. The .fixed-top class makes the navigation bar fixed at the top:

General Syntax 

      <nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center" style="margin-top: 120px;">Bootstrap Fixed Navbar</h2>
  <nav class="navbar fixed-top navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Fixed top</a>
    </div>
  </nav>
</div>
Try it now

Navbar: Fixed Bottom

Use the .fixed-bottom class to make the navbar stay at the bottom of the page.

General Syntax 

      <nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
Try it now

Source Code 

          <div class="container mt-5">
  <h2 class="text-center">Bootstrap Fixed Bottom Navbar</h2>
  <p class="text-justify text-center">Let us understand bootstrap fixed bottom navbar concept.</p>
  <nav class="navbar fixed-bottom navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Fixed Bottom Navbar </a>
    </div>
  </nav>
</div>
Try it now

Code Explanation

To create fixed bottom navbar, assign .fixed-bottom to the <nav> element base class.

Navbar: Sticky Top

Use the .sticky-top class to make the navbar fixed/stay at the top of the page when you scroll the page. This class does not work in IE11 and earlier (will treat it as position: relative).

General Syntax 

      <nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>
Try it now

Source Code 

          <div class="container mt-5">
  <nav class="navbar sticky-top navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Sticky Top Navbar</a>
    </div>
  </nav>
  <h1 class="text-center">Bootstrap Sticky Top Navbar</h1>
</div>
Try it now

Code Explanation

To create navbar having sticky top feature, assign .sticky-top to the <nav> element base class.

Related Tutorial

1.0 How to create Bootstrap offcanvas menu ?
2.0 How to create Bootstrap 5 navs & tabs menu ?

Online Test / Quiz

Question set 1

Web Tutorials

Bootstrap Navbars
Html Tutorial HTML
Javascript Tutorial JAVASCRIPT
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Tutorials
HTML JAVASCRIPT CSS BOOTSTRAP 5
Performance Evalution
HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
Practical Approach
Coaching Software Computer Software Skill Management Software School Management Software