Criando html reutilizável para barra de navegação em várias páginas

Eu pensei que seria conveniente ter um código reutilizável, especialmente para a barra de navegação, porque será o mesmo em todas as minhas páginas. Dessa forma, não precisarei percorrer cada página e editar manualmente cada uma individualmente quando ocorrer uma alteração.

Parece possível usar iframes, mas eu tentei e todo o estilo da página ficou fora de sintonia. Eu posso consertar, mas estou me perguntando se há algo semelhante.

Seria incrível se algo assim pudesse funcionar:

var navbar = document.getElementById ('navbar');
navbar.innerHtml = url ('navigation.txt');

Atualmente, estou trabalhando offline no meu site, então não acho que posso fazer solicitações xmlhttp. Corrigir? Pelo menos ainda tenho que obter um exemplo do ajax para funcionar. Isso é lamentável, porque acho que poderia usá-lo facilmente para meu aplicativo.

Aqui está minha marcação na barra de navegação. Não é muito complicado, então tenho a sensação de que vou editá-lo manualmente no final.

<nav>
    <ul id="navbar">
        <li><a href="biosketch.html">Biosketch</a></li>
        <li><a href="projects.html">Class Projects</a>
            <ul>
                <li><a href="projects.html#SeniorProject">Senior Project</a></li>
                <li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
            </ul>
        </li>
        <li><a href="#">Resume</a></li>
        <li><a href="#">Work Experience</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>