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 of different pages for this, each sharing the same navigation bar.

If the navigation is the same for each page, is it possible to write the navigation bar once and use it across the entire website? I am just annoyed when I make a change to a link or something and I have to run through and change each pages respective navigation link. Normally I'd use something like Angular to achieve this, but I am not sure how to do it with this more barebones approach. They really don't use any JS libraries either so if there's a way to do it with "raw" HTML CSS and JS I'd love to learn how this works if it exists.

Are you allowed to use a "HTML" framework? you could use Polymer which allows you to create new HTML Tags. https://www.polymer-project.org/ or you create speperate Website which contains your navigation and include this as iframe (no framework) — Pascal L., Jun 12 '17 at 14:45
have a look on that : https://stackoverflow.com/questions/31954089/html-css-navigation-bar-on-multiple-pages to load on your page your need code. — aorfevre, Jun 12 '17 at 14:50
Oldschool approach: http://html.com/frames/ (please don't use this. just posting for educational purposes) — phil, Jun 12 '17 at 14:52
How is it possible to do this without HTML, CSS or Javascript? How is using those a "restriction"? — Rob, Jun 12 '17 at 14:56
Possible duplicate of [HTML/CSS Navigation Bar on multiple pages](https://stackoverflow.com/questions/31954089/html-css-navigation-bar-on-multiple-pages) — Gaurang Tandon, Feb 16 '19 at 19:35

score 15 · Accepted Answer · edited Nov 10 '20 at 17:35

15

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>\
');

edited Nov 10 '20 at 17:35

Calaf

10,113
15
57
120

answered Jun 12 '17 at 14:50

N. M.

567
5
15

Would this work if I used bootstrap to build the navigation? – Jarred Parr Jun 12 '17 at 14:51
Absolutely, yes! You would be referencing the bootstrap stylesheet in your page's html file and jquery/javascript would basically just append the content you load/write to the current file - in such a way that the written content knows the included stylesheets/scripts. – N. M. Jun 12 '17 at 14:52
So JQuery is allowed for me to use. For that example, where would you write the HTML to be referenced? – Jarred Parr Jun 12 '17 at 14:54
In my example, the `navigation.html` would plain simple contain the navigation, nothing else. You could then use the JQuery call I provided at the point in your document(s) where you would normally put your navigation. – N. M. Jun 12 '17 at 14:55

score 4 · Answer 2 · answered Jun 12 '17 at 14:49

4

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>

answered Jun 12 '17 at 14:49

Michael Coker

52,626
5
64
64

Would this work if I was using bootstrap? What I mean is, would bootstrap still be recognized if I wrote the HTML template in the JS class? – Jarred Parr Jun 12 '17 at 14:51
Yep, just use whatever classes you would in normal HTML. – Michael Coker Jun 12 '17 at 14:54
1

this is super fugly – Selwyn May 24 '20 at 21:51

score 4 · Answer 3 · answered Jun 12 '17 at 14:54

4

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.

answered Jun 12 '17 at 14:54

Edison Biba

4,384
3
17
33

Single navigation bar across website?

3 Answers3

JQuery

Pure JavaScript

Linked