Navbar Toggling and Collapse in Bootstrap

Bootstrap’s navbar component includes functionality for toggling and collapsing the menu on smaller screens. This is essential for creating responsive designs where the navigation menu needs to be hidden or shown dynamically based on screen size.

1. Navbar Toggling

Navbar toggling is a feature that allows you to show or hide the navbar contents on smaller screens using a button. This button typically appears as a hamburger icon (three horizontal lines) that users can click to expand or collapse the menu.

a. Navbar Toggler Button

The navbar toggler button triggers the collapse or expansion of the navbar content.

Class: .navbar-toggler

Usage:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

• .navbar-toggler: This class styles the button for toggling the navbar.
• data-toggle="collapse": Specifies that this button will trigger a collapse action.
• data-target="#navbarNav": Specifies the target element that will be shown or hidden (the collapsible navbar content).
• aria-controls="navbarNav": Identifies the element controlled by this button.
• aria-expanded="false": Indicates whether the target element is expanded or collapsed. It should be set to true when the menu is expanded and false when collapsed.
• aria-label="Toggle navigation": Provides an accessible label for screen readers.

b. Navbar Toggler Icon

The navbar-toggler-icon class is used to display the default icon for the toggler button.

<span class="navbar-toggler-icon"></span>

• .navbar-toggler-icon: Adds the default hamburger icon. You can also use custom icons or images if needed.

2. Navbar Collapse

Navbar collapse allows the content of the navbar to be shown or hidden when toggled.

Class: .collapse, .navbar-collapse

Usage:

<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>
</div>

• .collapse: Hides the content by default on smaller screens and shows it when toggled.
• .navbar-collapse: Adds styling and behavior specific to navbar content that should be collapsible.
• id="navbarNav": The unique identifier used by the toggler button to control this collapsible content.

3. Responsive Navbar Toggling

Bootstrap’s navbar toggling is responsive by default and adjusts based on screen sizes. You can use various .navbar-expand-* classes to control at which breakpoint the navbar should be collapsed or expanded:

• .navbar-expand-sm: Expands the navbar on small screens (≥576px).
• .navbar-expand-md: Expands the navbar on medium screens (≥768px).
• .navbar-expand-lg: Expands the navbar on large screens (≥992px).
• .navbar-expand-xl: Expands the navbar on extra-large screens (≥1200px).

Example:

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>

• .navbar-expand-md: The navbar will be expanded on medium screens and above. On smaller screens, it will collapse.

4. Customizing Navbar Collapse

You can customize the behavior and appearance of the collapsed navbar content using additional classes or custom CSS:

• Add Spacing: Use spacing utility classes like .mt-3 or .p-3 to adjust margins and padding inside the collapsed content.

  <div class="collapse navbar-collapse mt-3" id="navbarNav">
    <!-- Navbar content -->
  </div>
  

• Custom Animation: Customize the animation of the collapse using CSS transitions if needed.

Summary of Navbar Toggling and Collapse in Bootstrap

• Navbar Toggling: Use .navbar-toggler to create a button for showing or hiding the navbar content on smaller screens. This button is typically styled with .navbar-toggler-icon.
• Navbar Collapse: Use .collapse and .navbar-collapse to wrap the content that should be collapsible. The content will be hidden by default on smaller screens and shown when toggled.
• Responsive Toggling: Control at which screen sizes the navbar collapses or expands using .navbar-expand-* classes.
• Customization: You can customize the collapsible content with spacing and animations as needed.