Best practice for navigation bars on modern websites

Question

so I've been really struggling to find a good answer for this question... I have many html pages and one navigation bar. I want to include the navigation bar on all pages, as would be good for consistency... Now, it goes against everything I've learned to duplicate the html code to make the navigation bar.

I've seen of a couple solutions to this problem:

• Use jQuery to $('nav').load('nav.html') load the navbar code into your document.
• Use jQuery to $('#content).load('content.html') load the content into your document.
• Use iFrames. No. (Unless I should?).
• Natural javascript variants of the first two...
• Just write the entire thing in javascript and include it in the head...

I have used the first one but it ruined my page structure. I've used the second one but I am having a lot of issues with styling as I have no idea when scripts are loaded if they are deferred in the head, put in the body, or if they are included in the html page that gets loaded in, etc.

My question is... what is the best practice to include a consistent navigation bar on all pages, without repeating the navbar code (unless that is the best practice).

Answer 1

This was "answered" in the comments of my question, but I figured I'll add it here...

Templating engines provide a way to "generate" an HTML file before putting it on a hosting server. This way you don't need to do any HTML inserts and have funky script loading issues. The nav bar will essentially be repeat code, but you won't be writing it yourself, the templating engine will.

A nice tutorial I found for Nunjucks can be found here. There are many more but this one felt like exactly what I needed.