How To Toggle Bulma Navbar With Pure Javascript

Well, here it is...

const navbar = document.querySelectorAll('.navbar')[0];
const navs = navbar.querySelectorAll('a');
const burger = document.querySelectorAll('.navbar-burger')[0];
const menu = document.querySelectorAll('.navbar-menu')[0];

burger.onclick = (e) => {
  burger.classList.toggle('is-active');
  menu.classList.toggle('is-active');
};

for (var i = 0; i < navs.length; i++) {
  if (!navs[i].classList.contains('navbar-burger')) {
    navs[i].onclick = () => {
      if (burger.classList.contains('is-active')) {
        burger.classList.toggle('is-active');
        menu.classList.toggle('is-active');
      }
    }
  }
};

Thanks for reading. x

Resources

• Javascript: https://javascript.com