A faster and simpler bootstrap menu

Based on pure CSS and Vanilla JavaScript


Arjen Karel Core Web Vitals Consultant
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

I help sites pass the Core Web Vitals:

lighthouse 100 score

A slow website is likely to miss out on conversions and revenue. Nearly half of internet searchers don't wait three seconds for a page to load before going to another site. Ask yourself: "Is my site fast enough to convert visitors into customers?" As a PageSpeed expert I will fix your PageSpeed problems once and for all. I can perform a page speed audit based on the Core Web Vitals guidelines, work with your team or fix your issues myself.

Core Web Vitals Consultancy

In-house Core Web Vitals support.

read more

Core Web Vitals site audits

Improve and fix your PageSpeed strategy

read more

Core Web Vitals training & workshops

Build in-house knowledge and empower your teams

read more

WordPress  optimization

Fix your WordPress Core web vitals issues

read more

A faster and simpler bootstrap menuCore Web Vitals A faster and simpler bootstrap menu