Sicuramente è più comodo fare questo genere di lavori nel server con PHP o linguaggi simili, ma se questo non è possibile, ci sono almeno due modi di farlo in javascript (senza librerie).
Web Components
Queste API sono il metodo ufficiale per creare dei componenti HTML (in pratica quello che chiedi tu) da Javascript. Se si guarda la documentazione possono sembrare abbastanza complicati, ma nel tuo caso la seguente implementazione è più che sufficiente:
File barraNavigazione.js:
window.customElements.define('site-nav', class extends HTMLElement {
constructor() { super(); }
connectedCallback() {
// INSERISCI IL TUO HTML QUI
this.innerHTML = `
<nav>
<a class="menu-item">Home</a>
<a class="menu-item">Chi siamo</a>
</nav>
`;
}
});
In questo file definisci l'oggetto "site-nav". Nella funzione "connectedCallback" inserisci dell'HTML dentro all'oggetto. Per utilizzarlo è sufficente inserire nel codice html il tag
<site-nav></site-nav>
File index.html:
<html>
<head>
<script src="./barraNavigazione.js"></script>
</head>
<body>
<site-nav></site-nav>
</body>
</html>
Ci sono molte altre cose da scoprire sui web components, se cerchi online troverai molte informazioni
Fetch
Come dicevi anche tu, è possibile salvare il codice html in un file (per l'esempio qui sotto, "site-nav.html") e poi caricarlo attraverso javascript. Per farlo puoi usare un codice simile a questo:
(async function () {
let data = await fetch('./site-nav.html');
document.body.innerHTML = await data.text();
})();
Ovviamente questa è un'implementazione molto semplice dato che inserisce l'html direttamente nel body.
Sia Fetch che i WebComponents sono supportati dai principali browser, ma se hai bisogno di supportare dei vecchi browser (o il famigerato Internet Explorer) potrebbe essere meglio se adatti l'esempio riportato sopra in modo da fargli usare una
XMLHTTPRequest invece di una richiesta Fetch.
Spero di esserti stato utile