Tengo html para una barra de navegación (de bootstrap) que tengo que copiar y pegar cada vez que agrego una nueva página a mi sitio web. Quiero factorizar el html de la barra de navegación en un archivo separado y hacer que todos los demás archivos html hereden el html. Estoy usando Vanilla JS, HTML y CSS, por lo que cosas como {%extends ...%} no son realmente una opción.

HTML de la barra de navegación:

 <nav class="navbar navbar-expand-sm navbar-dark bg-dark"> <a class="navbar-brand" href="index.html">Home</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="about_me.html">About Me<span class="sr-only"></span></a> </li> <li class="nav-item active"> <a class="nav-link" href="ec.html">Extracirriculuars<span class="sr-only"></span></a> </li> <li class="nav-item active"> <a class="nav-link" href="interests.html">Interests<span class="sr-only"></span></a> </li> <li class="nav-item"> <a class="nav-link" href="https://github.com/dddictionary">Github</a> </li> </ul> </div> </nav>

¡Cualquier ayuda es apreciada!