Single navigation bar across website?

Question

I am currently building a web application for my employer, but I have some restrictions. It has to be in HTML, CSS, and Javascript for the front end, and I have to use a lot

Answer 1

You can include html files inside html with the w3 library.

<div w3-include-html="navbar.html"></div>

<script>
    w3.includeHTML();
</script>

Check out this w3schools link.

Answer 2

JQuery

As JQuery is JS-based, you might be allowed to use it. You could then add a navigation div into each page's template:

<div id="navigation"></div>

and include a script on each page that executes the following JQuery-code:

$(function() {
    $("#navigation").load("navigation.html");
});

Pure JavaScript

Alternatively, if you cannot use JQuery whatsoever, you could use plain JavaScript, which is more lightweight but not as clean.

Wherever you want to include the navigation, simply include a script:

<script src="nav.js"></script>

Which holds your navigation based on document.write:

document.write('<div>\
    ... your navigation content ...\
    </div>\
');

Answer 3

The easiest way would just be to write the code in a JS file, and include that code on your pages. You can hard code it or make it more intelligent, but here's a basic demo.

var html = '<ul>\
              <li>\
                <a href="#">link</a>\
              </li>\
              <li>\
                <a href="#">link</a>\
              </li>\
              <li>\
                <a href="#">link</a>\
              </li>\
            </ul>';

document.getElementById('nav').innerHTML = html;

<nav id="nav"></nav>