How to create a Bootstrap 5 Navbar menu?

Bootstrap 5 Navbar

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

Bootstrap 5 Basic Horizontal Navbar

Step To Create Bootstrap Basic Horizontal Navbar Menu

• Add .navbar,.navbar-expand{-sm|-md|-lg|-xl} & background color utility.navbar-light & .bg-light to <nav> base class.
• Add .navbar-nav to <ul> base class.
• Add .nav-item to <li> base class.
• Add .nav-link to <a> 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>

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-->

Navbar Brand & Collapsing

Bootstrap .navbar-brand shows the brand name of the company 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>

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>

Navbar: Brand Logo

Place brand logo inside .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>

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>

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-->

To read more about the Bootstrap 5 navbar, click here.