A faster and simpler bootstrap menu

Based on pure CSS and Vanilla JavaScript


Arjen Karel
linkedin

A lightning-fast bootstrap menu with no dependencies

Most webmasters that come to me for Core Web Vitals support use jQuery in combination with a framework such as Bootstrap. 

To take full advantage of  bootstrap, you will have to add no less than 3 scripts. jQuery, popper and bootstrap. 

<script src="/js/jquery.js"></script>
<script src="/js/popper.js"></script>
<script src="/js/bootstrap.js"></script>

Critical request chain example

These scripts take time to download and evaluate. This is practically always at the expense of the 'Time To Interactive' and, depending on how the page is built, also at the expense of other lighthouse metrics such as First Contentful Paint and Largest Contentful Paint. 

I'm going to show you how to fix this by using only CSS and Vanilla JavaScript with no dependencies. For your convenience, I have simplified the examples to make them more easy to follow.

Mobile navigation

Bootstrap uses its own JavaScript for mobile navigation. To me that always seemed like overkill. You can have a mobile navigation hamburger menu without JavaScript. The code is actually very simple. I will use an invisible checkbox element and the CSS subsequent-sibling combinator to open and close the menu element via CSS.   

As soon as you I on the hamburger menu, the checkbox becomes active and that leads to the menu being displayed.

The HTML code

<nav>
 <input type="checkbox" id="real-navbar-toggle">
 <label for="real-navbar-toggle">☰</label>
 <ul>
   <li>
    <a href="#">Home</a>
   </li>
 </ul>
</nav>

CSS code

#real-navbar-toggle{display:none;}
#real-navbar-toggle:checked ~ ul{display:block;}

The result

Dropdown menu's

Dropdown menus are a bit trickier. Of course I can also use the hidden checkbox element. But that often leads to difficulties in your CMS where menus are created automatically. That's why I will use JavaScript for this. Only the code that I am using is much faster and doesn't require any dependencies such as jQuery. You can use this script as a drop-in for your current scripts if you like.

The HTML code

<nav>
 <div>Logo</div>
 <ul class="navbar-nav">
  <li>
   <a href="#">Home</a>
  </li>
  <li>
   <a class="dropdown-toggle" href="#">
    Dropdown toggle
   </a>
   <div>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
   </div>
  </li>
 </ul>
</nav>

The JavaScript code

var elements = document.getElementsByClassName("dropdown-toggle");
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("click", function(e) {
        e.preventDefault();
        for (var y = 0; y < elements.length; y++) {
            if (elements[y] == this) {
                elements[y].nextElementSibling.classList.toggle("show");
            } else {
                elements[y].nextElementSibling.classList.remove("show");
            }
        }
    });
}

The result

lighthouse 100 score

Perfect PageSpeed performance strategy

A modern website is a fast website, it's important to measure, optimize, and monitor if you're to get fast and stay fast. Performance plays a significant role in the success of any online venture, as high performing sites engage and retain users better than poorly performing ones.

Team up with the leading Core Web Vitals Expert. I help websites improve their Core Web Vitals score. With over 17 years of Technical Website Consultancy experience I know everything there is to know about pagespeed. I have helped hundreds of site owners build instant-loading websites.

PageSpeed services

gamerguides

⭐⭐⭐⭐⭐

"Arjen is an extremely talented Technical SEO Specialist. In just a matter of weeks he has worked hard to improve our Lighthouse scores to near perfect levels! We can't recommend him highly enough!"

Sophia Hayes, Founder & CEO at Gamer Guides

Erasmus MC

⭐⭐⭐⭐⭐

"Arjen really is the one and only PageSpeed wizard! He has helped us improve our Core Web Citals score where others could not help us. He is professional, helpfull, patient, kind and will get the job done"

Dr J.A.A Stoop at Erasmus MC

MGU

⭐⭐⭐⭐⭐

Arjen is truly a "PageSpeed Wizard". 🧙 With his incredible expertise at www.Corewebvitals.io, he has helped us improve the speed of our website tremendously. 🚀 Arjen has always been super nice and helpful and has gone the extra mile in every way. ⭐Top experience. Highly recommended.

Tobias Bargmann at MGU