I have html for a navbar (from bootstrap) which I have to copy paste every time I add a new page to my website. I want to factor out the navbar html to a separate file and have every other html file just inherit the html for it. I am using vanilla JS, HTML and CSS so stuff like {%extends ...%} is not really an option.

Navbar html:

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

Any help is appreciated!