Um menu bootstrap mais rápido e simples

Um menu bootstrap extremamente rápido e sem dependências

A maioria dos webmasters que me procuram para suporte de Core Web Vitals usa jQuery em combinação com um framework como o Bootstrap. 

Para tirar o máximo proveito do  bootstrap, você terá que adicionar nada menos que 3 scripts. jQuery, popper e bootstrap. 

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

Esses scripts levam tempo para serem baixados e avaliados. Isso ocorre praticamente sempre às custas do 'Time To Interactive' e, dependendo de como a página é construída, também às custas de outras métricas do lighthouse, como First Contentful Paint e Largest Contentful Paint. 

Vou te mostrar como corrigir isso usando apenas CSS e Vanilla JavaScript sem dependências. Para sua conveniência, simplifiquei os exemplos para torná-los mais fáceis de acompanhar.

Navegação mobile

O Bootstrap usa seu próprio JavaScript para navegação mobile. Para mim, isso sempre pareceu um exagero. Você pode ter um menu hambúrguer de navegação mobile sem JavaScript. O código é na verdade muito simples. Vou usar um elemento de caixa de seleção invisível (checkbox) e o CSS subsequent-sibling combinator para abrir e fechar o elemento de menu via CSS.   

Assim que você clica no menu hambúrguer, o checkbox se torna ativo e isso leva à exibição do menu.

O código HTML

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

O código CSS

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

O resultado

Menus Dropdown

Menus dropdown são um pouco mais complicados. Claro que eu também posso usar o elemento checkbox oculto. Mas isso frequentemente leva a dificuldades no seu CMS onde os menus são criados automaticamente. É por isso que vou usar JavaScript para isso. Apenas o código que estou usando é muito mais rápido e não requer nenhuma dependência como jQuery. Você pode usar este script como um substituto direto (drop-in) para os seus scripts atuais, se quiser.

O código HTML

<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>

O código JavaScript

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

O resultado