Bootstrap Navbar

Bootstrap Navigation Bar

Navigation Bars (Navbars)

A navigation bar (navbar) is a responsive navigation header, typically placed at the top of the page. It can contain branding, navigation links, forms, and more.

With Bootstrap 5, navbars are built with a combination of flexbox utilities and the collapse plugin for responsive behavior. They adapt to screen size, collapsing into a hamburger menu on smaller screens.

A standard navbar is created with the <nav class="navbar"> element. You’ll typically add .navbar-expand-{breakpoint} (e.g., .navbar-expand-lg) to control when the navbar content collapses. Color schemes are applied using classes like .navbar-light or .navbar-dark along with background color utilities (e.g., bg-light, bg-primary).

The following example shows a basic responsive navbar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navbar Example</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-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">WebSiteName</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" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Page 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Page 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container mt-3">
  <p>Content below the navbar...</p>
</div>

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

| | Key Navbar Components:

1. .navbar: Base class for the navbar.
2. .navbar-expand-{breakpoint}: Determines at which screen size the navbar collapses (e.g., navbar-expand-md).
3. .navbar-brand: For your company, product, or project name.
4. .navbar-toggler: The button that appears on small screens to toggle the collapsible content.
5. .navbar-toggler-icon: The hamburger icon inside the toggler button.
6. data-bs-toggle="collapse" and data-bs-target="#idOfCollapsibleContent": Attributes on the toggler to control the collapse behavior.
7. .collapse.navbar-collapse: The wrapper for collapsible navbar content.
8. .navbar-nav: For a list of navigation links.
9. .nav-link: Class for individual navigation links. | | --- | --- |

Dark Navigation Bar

To create a navbar with dark text and light background (e.g., for use on dark backgrounds), use .navbar-dark along with a dark background utility like bg-dark or bg-primary.

<!DOCTYPE html>
<html lang="en">
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">WebSiteName</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDark" aria-controls="navbarNavDark" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDark">
      <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="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

The .navbar-dark class adjusts text and toggler icon colors for better contrast on dark backgrounds. Conversely, .navbar-light (used in the first example with bg-light) is for light backgrounds.

Fixed Navigation Bar

You can fix the navbar to the top or bottom of the viewport. A fixed navbar stays visible in a fixed position, independent of page scroll.

Use .fixed-top to fix the navbar at the top:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
  <!-- Navbar content -->
</nav>

Use .fixed-bottom to fix the navbar at the bottom:

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-bottom">
  <!-- Navbar content -->
</nav>

Note: Fixed navbars can overlay other content. You might need to add padding to the <body> (e.g., padding-top for .fixed-top) to prevent content from being obscured. The amount of padding will depend on the navbar’s height.

Another option is .sticky-top, which makes the navbar scroll with the page until it reaches the top, then it sticks there.

Navbar With Dropdown

Navbars can also hold dropdown menus for more complex navigation structures.

<!DOCTYPE html>
<html lang="en">
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-info">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">WebSiteName</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" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Page 1
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Page 1-1</a></li>
            <li><a class="dropdown-item" href="#">Page 1-2</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Page 2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

Key elements for navbar dropdowns: .nav-item.dropdown, .nav-link.dropdown-toggle with data-bs-toggle="dropdown", and a ul.dropdown-menu containing .dropdown-item links.

Aligning Navbar Content

You can control the alignment of navbar content using flexbox utilities. For example, to push a group of navigation links to the right, you can add ms-auto (margin-start: auto, which is margin-left in LTR) to the ul.navbar-nav.

<!DOCTYPE html>
<html lang="en">
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">WebSiteName</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavRight" aria-controls="navbarNavRight" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavRight">
      <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>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Sign Up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Requires Bootstrap CSS and JS -->
</body>
</html>

In this example, the first ul.navbar-nav has me-auto (margin-end: auto) which pushes subsequent items to the right. If you wanted the second ul to be pushed to the far right, you could add ms-auto to it if it’s the first element after the brand or if the preceding ul does not have me-auto. The example above has the second ul naturally flow after the first one which fills available space to its right.

Note: Glyphicons are no longer part of Bootstrap. For icons, consider using SVGs, other icon libraries like Font Awesome, or Bootstrap Icons (a separate library). For simplicity, text links are shown here.

Collapsing The Navigation Bar

As shown in the first example, the navbar’s collapsibility is controlled by the .navbar-expand-{breakpoint} class, the .navbar-toggler button, and the .collapse.navbar-collapse div. The content within .navbar-collapse will be hidden on screens smaller than the specified breakpoint and replaced by the toggler button. Clicking the button will reveal the content.

The data-bs-target attribute on the toggler button must match the id of the .collapse.navbar-collapse div.

This responsive behavior is crucial for usability on mobile devices where screen space is limited.