How Do I Make My Collapsible Navbar Automatically Close on Link Click in Bootstrap?

Collapsible Navbar Automatically Closes on Link Click

You've created a functional collapsible navbar using Bootstrap 4. However, you'd like it to automatically close when a user selects a link. This article provides comprehensive solutions for both Bootstrap 3 and Bootstrap 4 to achieve this desired behavior.

Solution for Bootstrap 3

In Bootstrap 3, you can modify the links within the navbar to incorporate the 'data-toggle' attribute. This attribute triggers a collapse behavior when a link is clicked.

<ul class="navbar-nav mr-auto">
  <li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show">
    <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
    <a class="nav-link" href="#about-us">About</a>
  </li>
  <li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
    <a class="nav-link" href="#pricing">Pricing</a>
  </li>
</ul>

This solution utilizes the collapse and show classes to control the navbar's visibility.

Solution for Bootstrap 4

For Bootstrap 4, there are two main ways to accomplish the "close on click" functionality.

Option 1: jQuery Method

$('.navbar-nav>li>a').on('click', function() {
  $('.navbar-collapse').collapse('hide');
});

Option 2: JavaScript Method with Data Attributes

<ul class="navbar-nav me-auto">
  <li class="nav-item active" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
    <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
    <a class="nav-link" href="#about-us">About</a>
  </li>
  <li class="nav-item" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">
    <a class="nav-link" href="#pricing">Pricing</a>
  </li>
</ul>

Solution for Bootstrap 5

For Bootstrap 5, you can use either the JavaScript method with event listeners or the data attributes method.

JavaScript Method with Event Listeners

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = bootstrap.Collapse.getOrCreateInstance(menuToggle, {toggle: false})
navLinks.forEach((l) => {
  if (menuToggle.classList.contains('show')) {  // only fire on mobile
    l.addEventListener('click', () => { 
      bsCollapse.toggle() 
    })
  }
})

Data Attributes Method

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse">

The above is the detailed content of How Do I Make My Collapsible Navbar Automatically Close on Link Click in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!