Bootstrap - Navbars

Navbars are essential components in web design, providing a navigation menu at the top of the page. Bootstrap 5 offers an updated, flexible navbar system that’s fully responsive, easy to customize, and powerful for handling different screen sizes and menu items. In this guide, we’ll explore how to create and customize navbars using Bootstrap 5.

1. Basic Navbar Structure

A basic navbar in Bootstrap consists of the .navbar class, which provides a responsive container for navigation links, brand logos, and other menu items.

Basic Example

<nav class="navbar navbar-light bg-light">

  <a class="navbar-brand" href="#">Brand</a>

  <ul class="navbar-nav">

    <li class="nav-item">

      <a class="nav-link" 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>

</nav>

In this example:

.navbar: Main container for the navbar.

.navbar-light and .bg-light: Styles the navbar with a light background and dark text.

.navbar-brand: Styles the brand/logo.

.nav-item and .nav-link: Styles each individual item in the navbar.

2. Adding Navbar Colors

Bootstrap provides several color options out of the box. Use .navbar-light or .navbar-dark for text color and a background color class for the background.

Example with Dark Background

<nav class="navbar navbar-dark bg-dark">

  <a class="navbar-brand" href="#">Brand</a>

</nav>

The .navbar-dark class changes the text color for better readability on dark backgrounds, while .bg-dark sets the background color to dark.

3. Navbar with Toggler (Collapsible)

To create a collapsible navbar that’s responsive, use the toggler button to control when the navbar content is visible on smaller screens.

Example of Collapsible Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <a class="navbar-brand" href="#">Brand</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" 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>

</nav>

In this example:

.navbar-expand-lg: Expands the navbar for large screens and collapses it on smaller screens.

.navbar-toggler: The button that toggles the collapse state of the navbar.

.collapse and .navbar-collapse: Used to hide/show the navbar items when toggled.

4. Navbar with Dropdowns

Adding dropdowns in Bootstrap navbars is straightforward. You can nest a .dropdown within the .navbar-nav.

Example with Dropdown

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <a class="navbar-brand" href="#">Brand</a>

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

    <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" href="#">Home</a>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

          Services

        </a>

        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">

          <li><a class="dropdown-item" href="#">Action</a></li>

          <li><a class="dropdown-item" href="#">Another action</a></li>

          <li><hr class="dropdown-divider"></li>

          <li><a class="dropdown-item" href="#">Something else here</a></li>

        </ul>

      </li>

    </ul>

  </div>

</nav>

In this example:

.dropdown-toggle: Creates the dropdown toggle link.

.dropdown-menu and .dropdown-item: Defines the dropdown items.

5. Navbar Alignment

To align navbar items, you can use margin utilities or flex utilities.

Example with Centered and Right-Aligned Items

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <a class="navbar-brand" href="#">Brand</a>

  <div class="collapse navbar-collapse justify-content-center" id="navbarNav">

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link" href="#">Home</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">About</a>

      </li>

    </ul>

  </div>

  <div class="collapse navbar-collapse justify-content-end">

    <ul class="navbar-nav">

      <li class="nav-item">

        <a class="nav-link" href="#">Login</a>

      </li>

      <li class="nav-item">

        <a class="nav-link" href="#">Register</a>

      </li>

    </ul>

  </div>

</nav>

In this example:

.justify-content-center: Centers the first set of items.

.justify-content-end: Aligns the second set to the right.

6. Navbar with Form Controls

You can also add form controls like search boxes inside a navbar.

Example with Search Form

<nav class="navbar navbar-expand-lg navbar-light bg-light">

  <a class="navbar-brand" href="#">Brand</a>

  <div class="collapse navbar-collapse" id="navbarNav">

    <ul class="navbar-nav mr-auto">

      <li class="nav-item active">

        <a class="nav-link" href="#">Home</a>

      </li>

    </ul>

    <form class="d-flex">

      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

      <button class="btn btn-outline-success" type="submit">Search</button>

    </form>

  </div>

</nav>

In this example:

.form-control: Applies Bootstrap styling to the search input field.

.btn-outline-success: Styles the button.

7. Fixed and Sticky Navbars

Bootstrap allows you to fix the navbar to the top of the viewport or make it sticky, so it scrolls until it reaches the top.

Fixed Navbar Example

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

  <a class="navbar-brand" href="#">Brand</a>

</nav>

Sticky Navbar Example

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">

  <a class="navbar-brand" href="#">Brand</a>

</nav>

.fixed-top: Sticks the navbar to the top of the page.

.sticky-top: Keeps the navbar in its place until it reaches the top of the viewport when scrolling.

Conclusion

Bootstrap 5 navbars are powerful tools for creating responsive, accessible, and user-friendly navigation bars. With the flexibility to add dropdowns, forms, alignment options, and collapsible elements, they can be adapted to suit any layout or functionality you need. Try combining different elements and styling options to customize your navbar for a seamless user experience on your website.