Bootstrap 5 Navbars - The Coding College

Welcome to The Coding College! In this tutorial, we’ll dive deep into the Bootstrap 5 Navbar component—a responsive, feature-rich navigation bar ideal for websites and web apps. Whether you’re creating a simple header or a full-featured navigation system, Bootstrap 5 Navbar has everything you need.

What is a Bootstrap 5 Navbar?

The Navbar in Bootstrap 5 is a responsive component designed to streamline navigation. It supports a variety of layouts and styling options, making it highly versatile for desktop and mobile interfaces. With built-in support for links, brand logos, dropdowns, toggles, and forms, it’s a go-to solution for developers.

Basic Structure of a Navbar

A basic Bootstrap Navbar consists of the following elements:

A container to group content.
A .navbar class to define the Navbar.
Links or buttons for navigation.

Here’s an example of a simple Navbar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Navbar</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="btn btn-outline-success" type="button">Action</button>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Building a Fully Functional Navbar

1. Adding a Brand

The .navbar-brand class highlights your logo or brand name. It’s typically placed at the start of the Navbar.

<a class="navbar-brand" href="#">The Coding College</a>

2. Adding Navigation Links

Use an unordered list with .navbar-nav and .nav-item to create a set of links.

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

3. Combining Elements

Combine the brand and links to create a complete Navbar.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">The Coding College</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>
  </div>
</nav>

Styling the Navbar

1. Background Colors

Use utility classes like bg-light, bg-dark, or custom colors.

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Dark Navbar</a>
</nav>

2. Fixed and Sticky Navbars

Make the Navbar stick to the top of the page using fixed-top or sticky-top.

<nav class="navbar navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Fixed Navbar</a>
</nav>

<nav class="navbar navbar-light bg-light sticky-top">
  <a class="navbar-brand" href="#">Sticky Navbar</a>
</nav>

Responsive Navbars

Bootstrap Navbars are responsive by default. Use the .navbar-expand-{breakpoint} class to control when the Navbar collapses.

Breakpoint Class	Description
`navbar-expand-sm`	Navbar expands at small screens (576px)
`navbar-expand-md`	Navbar expands at medium screens (768px)
`navbar-expand-lg`	Navbar expands at large screens (992px)
`navbar-expand-xl`	Navbar expands at extra-large screens (1200px)

Example: Responsive Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">The Coding College</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" 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>
      </ul>
    </div>
  </div>
</nav>

Adding Dropdowns

Integrate dropdown menus in your Navbar using the .dropdown class.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">The Coding College</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 active" 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">
            Dropdown
          </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><a class="dropdown-item" href="#">Something else</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Navbar with Forms

Add forms to your Navbar for features like search bars or login forms.

<nav class="navbar navbar-light bg-light">
  <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>
</nav>

FAQs About Bootstrap 5 Navbars

Q1: Can I add custom styles to the Navbar?

Yes, you can use custom CSS or override existing Bootstrap classes for complete customization.

Q2: How do I make the Navbar sticky?

Use the .sticky-top class to make the Navbar stick at the top while scrolling.

Q3: Can Navbars work with JavaScript?

Yes, Navbar toggling relies on Bootstrap’s JavaScript bundle.

Conclusion

Bootstrap 5 Navbar is a versatile and essential component for any website. Whether you’re building a simple header or an advanced navigation system, its responsiveness and customization options make it a developer favorite.