How can I reuse a navigation bar on multiple pages?

Html Problem Overview

I just finished making my home/index.html page. To keep the nav bar where it is, and have it stay while users click through all my pages. Do I have to copy and paste the nav code to the top of each page? Or is there another way to do so that would look cleaner?

HMTL nav:

<nav>
    <div>
        <a href="/">
            <div id="logo"><img src="image.png" alt="Home"/></div>
            <div id="headtag"><img src="image.png" alt="Home"/></div>
            <div id="tagline"><img src="image.png" alt="Home"/></div>
        </a>
    </div>
    <div> 
        <a href="/" class="here">Home</a>
        <a href="/about.html" >About</a>      
        <a href="/services.html" >Services</a>          
        <a href="/pricing.html" >Pricing</a>    
        <a href="/contact.html" >Contact Us</a>
        <input id="srchbar" type="search" placeholder="Search">
    </div>
</nav>

Html Solutions

Solution 1 - Html

This is what helped me. My navigation bar is in the body tag. Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar). In the target page, this goes in the head tag:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Then in the body tag, a container is made with an unique id and a javascript block to load the nav.html into the container, as follows:

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

Solution 2 - Html

I know this is a quite old question, but when you have JavaScript available you could use jQuery and its AJAX methods.

First, create a page with all the navigation bar's HTML content.

Next, use jQuery's $.get method to fetch the content of the page. For example, let's say you've put all the navigation bar's HTML into a file called navigation.html and added a placeholder tag (Like <div id="nav-placeholder">) in your index.html, then you would use the following code:

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>

Solution 3 - Html

Using pure javascript:

Keep your navbar html code in nav.html file.

Create nav.js file with this code:

fetch('nav.html')
.then(res => res.text())
.then(text => {
	let oldelem = document.querySelector("script#replace_with_navbar");
	let newelem = document.createElement("div");
	newelem.innerHTML = text;
	oldelem.parentNode.replaceChild(newelem,oldelem);
})

And in other html files that you want navbar add this line:

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

This will replace the script itself with the content of nav.html

Solution 4 - Html

You can use php for making multi-page website.

Create a header.php in which you should put all your html code for menu's and social media etc
Insert header.php in your index.php using following code

<? php include 'header.php'; ?>

(Above code will dump all html code before this)Your site body content.

Similarly you can create footer and other elements with ease. PHP built-in support html code in their extensions. So, better learn this easy fix.

Solution 5 - Html

Brando ZWZ provides some great answers to handling this situation.

Re: Same navbar on multiple pages Aug 21, 2018 10:13 AM|LINK

As far as I know, there are multiple solution.

For example:

The Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar).

Then we could directly load it from the jquery without writing a lot of codes.

Like this:

    <!--Navigation bar-->
    <div id="nav-placeholder">

    </div>
    
    <script>
    $(function(){
      $("#nav-placeholder").load("nav.html");
    });
    </script>
    <!--end of Navigation bar-->

Solution2:

You could use JavaScript code to generate the whole nav bar.

Like this:

Javascript code:

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';
 
    $("#main-bar").html(bar);
 
    var id = getValueByName("id");
    $("#" + id).addClass("active");
});
 
function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

Html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>

https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages

Solution 6 - Html

A very old but simple enough technique is to use "Server-Side Includes", to include HTML pages into a top-level page that has the .shtml extension. For instance this would be your index.shtml file:

<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>

Yes, it is lame, but it works. Remember to enable SSI support in your HTTP server configuration (this is how to do it for Apache).

Solution 7 - Html

In your javascript file you can create a element with the HTML code as string and then insert that variable in the beginning of your HTML using insertAdjacentHTML keyword

    var navbar = ` 
		<nav>
			<div>
				<a href="/">
					<div id="logo">
						<img src="image.png" alt="Home" />
					</div>
					<div>
						<img src="image.png" alt="Home" />
					</div>
					<div id="tagline">
						<img src="image.png" alt="Home" />
					</div>
				</a>
			</div>
			<div>
				<a href="/" class="here">
					Home
				</a>
				<a href="/about.html">About</a>
				<a href="/services.html">Services</a>
				<a href="/pricing.html">Pricing</a>
				<a href="/contact.html">Contact Us</a>
			</div>
		</nav>`;

        // inserting navbar in beginning of body
        document.body.insertAdjacentHTML("afterbegin", navbar);

Lastly link the Javascript file to your HTML using

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

Content Type	Original Author	Original Content on Stackoverflow
Question	blackRob4953	View Question on Stackoverflow
Solution 1 - Html	Ramtin	View Answer on Stackoverflow
Solution 2 - Html	Jacques Marais	View Answer on Stackoverflow
Solution 3 - Html	Mendi Barel	View Answer on Stackoverflow
Solution 4 - Html	Sachin Kanungo	View Answer on Stackoverflow
Solution 5 - Html	user6848902	View Answer on Stackoverflow
Solution 6 - Html	Laryx Decidua	View Answer on Stackoverflow
Solution 7 - Html	DivyashC	View Answer on Stackoverflow