How to make nav links close the collapse menu?

[DeanParkin]

I'm using Bootstrap 5 and Next.js and I'm trying to collapse the Navbar menu when I click a link in mobile view. I've tried a few different methods but I'm hitting a few roadblocks and I can't find any documentation on preferred methods.

I've tried using the classlist.remove('show') and this makes the toggle method very jumpy and effects the toggle process.

I've tried using ( data-bs-toggle"collapse" data-bs-target="#navbarToggler" ) as properties on the links and this does collapse the menu but the links then blink in and out when the collapse menu is past its breakpoint and is not in the collapse menu.

I'm trying now to access the toggle method for that collapse by using the onClick property on the link, and I can't seem to get that to work at all. my method is currently:

onClick={() => {
const tog = document.getElementById("navbarToggler");
if (
window.innerWidth < 768 &&
tog.classList.contains("show")
) {
tog.collapse({ toggle: false }).collapse("hide");
} else {
console.log("no");
}
}}

Not sure what to do but wondering if anyone here has some experience with this and a preferred go-to method, Thanks for taking the time to read this

[GeoSot]

Probably you are searching something like

const tog = document.getElementById("navbarToggler")
if ( window.innerWidth < 768 &&  tog.classList.contains("show") ) {    
    const instance=  bootstrap.collapse.getOrCreateInstance(tog)
    instance.hide()
} else {
     console.log("no");
}

[DeanParkin]

because I'm using Next.js it's telling me:

Unhandled Runtime Error
ReferenceError: bootstrap is not defined

[GeoSot]

I suppose you have to find how you have exported BS javascript (namespaced or not)
some examples here 😉
https://www.webdevtutor.net/blog/how-to-add-bootstrap-5-to-next-js-app
https://blog.logrocket.com/handling-bootstrap-integration-next-js/

[DeanParkin]

I've managed to do it, it's probably not the soundest way to do it in react but it's working I ended up doing something along the lines of this:

useEffect(() => {
let size = window.innerWidth;
let navLinks = document.querySelectorAll(".nav-link");

const updateWindowDimensions = () => {
  size = window.innerWidth;
};
window.addEventListener("resize", () => {
  updateWindowDimensions();
  if (size > 992) {
    navLinks.forEach((link) => {
      link.removeAttribute("data-bs-toggle");
      link.removeAttribute("data-bs-target");
    });
    console.log("removed attributes");
  } else {
    navLinks.forEach((link) => {
      link.setAttribute("data-bs-toggle", "collapse");
      link.setAttribute("data-bs-target", "#navbarToggler");
    });
    console.log("set attributes");
  }
});

}, []);

const handleClick = (e) => {
e.preventDefault();
router.push(e.target.href);
};

[DeanParkin]

Cant F*$*%(^ believe it, been trying to do this for weeks, spent an entire day on it yesterday, finally pipe up and ask a question today and within an hour I've managed to crack it, Sods Law, Thank you for your help Geo

[arturhonores]

Dear @DeanParkin
I have the same problem, but I don't know how I can add your solution to my script, could you provide me with the code, I can't find a solution in other forums.

I only found this, but it doesn't work for me:
const navLinks = document.querySelectorAll(".nav-item"); const menuToggle = document.getElementById("navbarSupportedContent"); const bsCollapse = new bootstrap.Collapse(menuToggle); navLinks.forEach((l) => { l.addEventListener("click", () => { bsCollapse.toggle(); }); });

[DeanParkin]

try this:

//collect all your nav links
let navLinks = document.querySelectorAll(".nav-link");

// variable to store the size of the window
let size = window.innerWidth;

// function to toggle the data-bs attributes depending on the breakpoint set
function setAttr() {

  // 992 is the md breakpoint
  if (size > 992) {
    navLinks.forEach((link) => {
      link.removeAttribute("data-bs-toggle");
      link.removeAttribute("data-bs-target");
    });
  } else {
    navLinks.forEach((link) => {
      link.setAttribute("data-bs-toggle", "collapse");
      // #navbarToggler is the id of the navbar collapse
      link.setAttribute("data-bs-target", "#navbarToggler");
    });
  }
}

//function to update the size variable 
const updateWindowDimensions = () => {
  size = window.innerWidth;
};

// event listener to call the function to update the size variable and check the breakpoint
window.addEventListener("resize", () => {
  updateWindowDimensions();
  setAttr();
});

// call the function to set the attributes
setAttr();

// call on the document on load just for good measure
document.onload = () => {
  setAttr();
};

[arturhonores]

@DeanParkin

This code has worked for me

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
navLinks.forEach((l) => {l.addEventListener('click', () => { bsCollapse.toggle() })
})

[DeanParkin]

I tried using that on next js, and I had no luck with it, that's why I used that code I sent you, I applied it in a useEffect statement, not sure if there is another way to do it but that worked for me.

[tungphan995]

You are the best.

…

On Wednesday, August 17, 2022, arturhonores ***@***.***> wrote: Dear @DeanParkin <https://github.com/DeanParkin> I have the same problem, but I don't know how I can add your solution to my script, could you provide me with the code, I can't find a solution in other forums. I only found this, but it doesn't work for me: const navLinks = document.querySelectorAll(".nav-item"); const menuToggle = document.getElementById("navbarSupportedContent"); const bsCollapse = new bootstrap.Collapse(menuToggle); navLinks.forEach((l) => { l.addEventListener("click", () => { bsCollapse.toggle(); }); }); — Reply to this email directly, view it on GitHub <#36786 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHORFC7DOXUOS4H44T4CW7DVZUP43ANCNFSM54DEZNAQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[arturhonores]

@tungphan995
this code works perfectly

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
navLinks.forEach((l) => {l.addEventListener('click', () => { bsCollapse.toggle() })
})

[aselemidivine]

This works perfectly fine. Thanks a lot.

[Ayushpatil3103]

hey this code doesn't run second time?we have to refresh

[Pholarin]

It worked for me too. Thanks

[theboyofdream]

const menuToggle = document.getElementById('navbarCollapse')
    const navLinks = menuToggle.querySelectorAll('.nav-item')
    const bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
    navLinks.forEach((l) => {
      l.addEventListener('click', () => {
        if(window.innerWidth < 992) { bsCollapse.toggle() }
      })
    })

Thanks for help.