Bootstrap 4 - Drupal 8 vanilla JS menu

header.html.twig

<header id="header" class="header" role="banner" aria-label="{{ 'Site header'|t}}">
  <nav class="navbar navbar-expand-lg fixed-top" id="main-navbar">
    <div class="navbar-brand d-lg-none d-xl-none">YOUR SITE NAME</div>
    <button id="navbar-toggler-id" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#CollapsingNavbar" aria-controls="CollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="CollapsingNavbar">
      {{ page.primary_menu }}
    </div>
  </nav>
</header>

nav.js

(function () {
  // Replicate BS4 Menu open and close.
  document.getElementById('navbar-toggler-id').onclick = function() {
    document.getElementById('navbar-toggler-id').classList.toggle('collapsed');
    document.getElementById('CollapsingNavbar').classList.toggle('show');
  };
})();