Case Navigation Bar

Bootstrap 5 Case Study: Adding a Navigation Bar

Understanding Navigation Bars (Navbars)

A navigation bar (navbar) is a crucial component for website navigation, typically placed at the top of the page. Bootstrap 5 navbars are responsive, meaning they can adapt their layout (e.g., collapse into a hamburger menu) based on screen size.

A standard navbar is created with <nav class="navbar navbar-expand-lg navbar-light bg-light">. The navbar-expand-lg class means the navbar will be expanded (horizontal) on large screens (lg and up) and collapsed on smaller screens. You can change lg to sm, md, or xl to control when it collapses. navbar-light is for use with light background colors (sets dark text), and bg-light provides a light gray background. For dark backgrounds, use navbar-dark and a dark bg-* utility.

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>Bootstrap Navbar Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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>
  <!-- Page content here -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Note: The navbar-toggler button and its data-bs-target (pointing to the ID of the collapsible div) are essential for the collapsing behavior on smaller screens. The navbar-toggler-icon provides the hamburger menu icon.

Dark Themed Navigation Bar

To create a dark-themed navbar, use .navbar-dark along with a dark background utility like .bg-dark or .bg-primary.

<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="#darkNavbarNav" aria-controls="darkNavbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="darkNavbarNav">
      <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>
      </ul>
    </div>
  </div>
</nav>

Fixed Navigation Bar

You can fix the navbar to the top or bottom of the viewport. It will stay in place regardless 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>

Sticky Top: You can also use .sticky-top which makes the navbar scroll with the page until it reaches the top, then it stays there. Note: Fixed/sticky positioning can sometimes require adjustments to page content padding to prevent overlap.

Navigation Bar With Dropdown

Navbars can include dropdown menus for more complex navigation structures. This requires Bootstrap’s JavaScript (included in the bundle).

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <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 active" 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 Options
          </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>

Key elements: .dropdown on the <li>, .dropdown-toggle and data-bs-toggle="dropdown" on the <a>, and .dropdown-menu on the nested <ul>.

Right-Aligned Navigation Items

To right-align navigation items, you can use margin utilities like ms-auto (margin-start: auto, which is margin-left in LTR languages) on the <ul> element containing the items you want to push to the right.

Example with Login/Sign Up on the right (using Bootstrap Icons for demonstration, remember to include its CSS):

<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="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav me-auto 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="#">Page 1</a></li>
      </ul>
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="bi bi-person-plus-fill"></i> Sign Up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#"><i class="bi bi-box-arrow-in-right"></i> Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Make sure to include Bootstrap Icons CSS if using bi-* classes -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"> -->

The me-auto (margin-end: auto) on the first ul pushes subsequent elements to the right. Alternatively, ms-auto on the second ul pushes it to the right.

Collapsing The Navigation Bar (Responsive Behavior)

As shown in the first example, the navbar collapse behavior is controlled by .navbar-expand-{breakpoint}. The content within the <div class="collapse navbar-collapse" id="..."> will be hidden behind a toggle button (the ‘hamburger’ menu) on screens smaller than the specified breakpoint.

Key components for collapse functionality:

1. navbar-expand-{sm|md|lg|xl|xxl}: Defines at which breakpoint the navbar expands.
2. Toggler Button: <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#uniqueNavbarID" ...>.
3. Collapsible Element: <div class="collapse navbar-collapse" id="uniqueNavbarID"> ... </div>.

Application Scenario: A company website with multiple sections like ‘Home’, ‘About Us’, ‘Services’, ‘Products’, ‘Contact’. On desktop, these links are visible. On mobile, they collapse into a hamburger menu to save space, providing a clean user interface.

Common Pitfall: Mismatched data-bs-target on the toggler button and the id of the collapsible div. These must match exactly for the toggle to work. Also, ensure Bootstrap’s JavaScript (bundle) is included.