How to make nav links close the collapse menu? #36786

DeanParkin · 2022-07-20T10:45:19Z

DeanParkin
Jul 20, 2022

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

Answered by DeanParkin

Jul 20, 2022

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.setAttr…

View full answer

GeoSot · 2022-07-20T11:24:50Z

GeoSot
Jul 20, 2022
Collaborator

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");
}

2 replies

DeanParkin Jul 20, 2022
Author

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

Unhandled Runtime Error
ReferenceError: bootstrap is not defined

GeoSot Jul 20, 2022
Collaborator

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 · 2022-07-20T12:36:06Z

DeanParkin
Jul 20, 2022
Author

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);
};

5 replies

DeanParkin Jul 20, 2022
Author

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 Aug 17, 2022

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 Aug 17, 2022
Author

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 Aug 17, 2022

@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 Aug 18, 2022
Author

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 · 2022-08-17T17:42:18Z

tungphan995
Aug 17, 2022

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: ***@***.***>

4 replies

arturhonores Aug 17, 2022

@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() })
})

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

How to make nav links close the collapse menu? #36786

{{title}}

Replies: 3 comments 11 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

How to make nav links close the collapse menu? #36786

Replies: 3 comments · 11 replies

GeoSot Jul 20, 2022 Collaborator

DeanParkin Jul 20, 2022 Author

GeoSot Jul 20, 2022 Collaborator

DeanParkin Jul 20, 2022 Author

DeanParkin Jul 20, 2022 Author

DeanParkin Aug 17, 2022 Author

DeanParkin Aug 18, 2022 Author

Replies: 3 comments 11 replies

GeoSot
Jul 20, 2022
Collaborator

DeanParkin Jul 20, 2022
Author

GeoSot Jul 20, 2022
Collaborator

DeanParkin
Jul 20, 2022
Author

DeanParkin Jul 20, 2022
Author

DeanParkin Aug 17, 2022
Author

DeanParkin Aug 18, 2022
Author