Bootstrap 5 — More we can do with Navbars

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add navbar content with Bootstrap 5.

Nav

We can add navigation links to our navbar.

To do that, we add a div with the collapse and navbar-collapse classes.

For example, we can write:

<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-toggle="collapse" data-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" href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Setting</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

We have a div with the collapse and navbar-collapse class to use as the container for the nav links.

Then we add the toggle icon by adding a span with the navbar-toggler-icon class.

We also have a button with the navbar-toggler class to add the navbar toggle.

Then in the navbar-nav we have the nav links in the li with the .nav-item class.

This together will create a responsive navbar that’s collapsed when the screen is narrow and expanded when it’s wide.

We can also add dropdowns into our navbar.

For example, we can write:

<nav class="navbar navbar-expand-lg navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand" href="#">App</a>  
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">  
      <span class="navbar-toggler-icon"></span>  
    </button>  
    <div class="collapse navbar-collapse" id="navbarNavDropdown">  
      <ul class="navbar-nav">  
        <li class="nav-item">  
          <a class="nav-link active"  href="#">Home</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Profile</a>  
        </li>  
        <li class="nav-item">  
          <a class="nav-link" href="#">Settings</a>  
        </li>  
        <li class="nav-item dropdown">  
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" >  
            Dropdown link  
          </a>  
          <ul class="dropdown-menu">  
            <li><a class="dropdown-item" href="#">action</a></li>  
            <li><a class="dropdown-item" href="#">action 2</a></li>  
            <li><a class="dropdown-item" href="#">action 3</a></li>  
          </ul>  
        </li>  
      </ul>  
    </div>  
  </div>  
</nav>

We add our dropdown by creating an li element with the .nav-item and dropdown classes.

This way, it’ll fit in the menu.

Also, we have the .dropdown-menu class to display the menu.

.dropdown-item has the dropdown menu items.

Forms

We can also add forms to our navbars.

For example, we can write:

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

to add the form into the navbar.

We have a form with the d-flex class to make it display flex.

The input has mr-2 to add some right margins.

We can also add other items besides the form.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <div class="container-fluid">  
    <a class="navbar-brand">App</a>  
    <form class="d-flex">  
      <input class="form-control mr-2" type="search" placeholder="Search">  
      <button class="btn btn-outline-success" type="submit">Search</button>  
    </form>  
  </div>  
</nav>

We added an a element with the navbar-brand class to add the brand on the left side.

The input has the form-control class so that it has Bootstrap styles applied to it.

Input groups also work with navbars.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <form class="container-fluid">  
    <div class="input-group">  
      <span class="input-group-text">@</span>  
      <input type="text" class="form-control" placeholder="Search">  
    </div>  
  </form>  
</nav>

We have the input-group class applied to the div.

And we have the span with the input-group-text to add the text.

Also, we can add buttons to our navbar.

For example, we can write:

<nav class="navbar navbar-light bg-light">  
  <form class="container-fluid justify-content-start">  
    <button class="btn btn-outline-success mr-2" type="button">big button</button>  
    <button class="btn btn-sm btn-outline-secondary" type="button">small button</button>  
  </form>  
</nav>

We have buttons of various sizes in the form element.

The form has the container-fluid and justify-content-start to lay out the buttons.

justify-content-start make them align to the left.

The left button has the mr-2 class to add some right margins to the button.

Conclusion

We can add forms, pictures, dropdowns, and buttons to our navbar.