Member Avatar for totalwar235

I would like to make a navigation bar that spans alot of pages but only links to a few main ones and do not want to copy and paste this bar to each page.

is there a way to make a document that contains my navigation bar and just place a link of somekind so it loads it's contents into the html file? This way I would only have to change one page whenever I want to change my navigation bar and just placing the link into all my other pages would load the new changes to everything else.

  • 6 Contributors
  • 10 Replies
  • 332 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by oriclon

Dani AI

Generated

A single, central file that supplies the navigation and is inserted at render/build time is the most reliable solution. As pointed out, a server-side include (PHP, ASP.NET layouts or template partials, Apache SSI) is ideal because it preserves SEO, accessibility and link paths. The CSS from styles a bar but does not solve duplication, and the client-side suggestion from (AJAX) works but has important trade‑offs.

Options and tradeoffs in brief:

  • Server-side includes / framework layouts — best for SEO, accessibility and predictable paths; requires server support.
  • Build-time partials (static site generators or a simple build step) — great for static hosts; produces plain HTML at deploy time.
  • Client-side include (AJAX/Fetch or jQuery) — works without server-side support but can cause flash-of-unstyled-content, relies on JavaScript, and may complicate search indexing and same‑origin/CSP rules.
  • iframe — generally discouraged (as warned) because of accessibility, navigation and styling issues.

Two concise examples not already shown in the thread:

<!-- Apache SSI (example) -->
<!--#include virtual="/includes/navbar.html" -->
<!-- Modern client-side fetch -->
<div id="nav-placeholder"></div>

<script>
fetch('/includes/navbar.html')
  .then(r => r.text())
  .then(html => document.getElementById('nav-placeholder').innerHTML = html)
  .catch(() => {/* graceful fallback or leave placeholder */});
</script>

Quick troubleshooting notes: use root‑relative paths (e.g. /includes/navbar.html) to avoid broken links from nested folders; ensure the server is configured for SSI (.shtml) when used; if loading via JS, provide a non‑JS fallback or pre-render for critical links; watch CSP and same‑origin restrictions when loading across domains; keep the nav as a fragment (no full HTML wrapper) to avoid markup conflicts. For most setups the safest choices are server‑side includes or a build‑time partial; client‑side loading is acceptable only when server changes are not possible.

Recommended Answers

All 10 Replies

Member Avatar for oriclon

not really, but there is an easy solution. The top part is the css, and the bottom is the html coding

#navbar li { display: inline;}
#navbar li a:link, #navbar li a:visited{
text-decoration: none;
float:center;
width:15em;
padding:0.1em .5em 0.05em; 2em;
color: white;
background-color: #0000b7;
border-top: .15em solid silver;
border-left: .15em solid silver;
}



<center><ul id="navbar">
<li><a href="example.html">example</a>
<li><a href="example.html">example</a></li><br><br></ul>
Member Avatar for oriclon

By the way, you can have more than two bars, and you can make them vertical by adding (<br>)

Member Avatar for mattster

, thats not what he asked: read the question

make a document that contains my navigation bar and just place a link of somekind so it loads it's contents into the html file?

Only through using a server side language like PHP. You can use an <iframe>, but very bad idea leading to a world of problems.

In PHP, you have your nav bar in a file, and then on every page do include("navbar.html");. Easy as that.

Member Avatar for B1Brigman

Hi,
in HTML:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li class="Building-It">Working</li>
    <li>About</li>
    <li>Contact</li>
 </ul>

 In CSS:

 li
 (
     display: inline;
     margine-right: 10px;
 )
 li.coming-soon 
 (
     display: none;
 )
Member Avatar for JorgeM

You'll definitely need more than just HTML to have a reusable page/code that you can insert into your pages. Mattster mentions PHP but other server side scripting languages have other solutions as well. For example, ASP.net uses the concept of master pages.

Member Avatar for shashikumar s g 
<html> 
  <head> 

    <script> 
    Jquery(function(){
      jquery("#htmlfileinclude").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 

      <div > header html 
     <div id="htmlfile include"></div>
     </div>
  </body> 
</html>
Member Avatar for oriclon

My answer would have had a page with external links to all of the pages

Member Avatar for shashikumar s g

plz read the question once again

Member Avatar for oriclon


That's pretty much what I wrote, but I added the actual code for link.
<a href="example.html">example</a>

Member Avatar for oriclon


Also, I added a css file for the nav bar so that totalwar235
could customize his site or whatever he makes

Edited by oriclon because: repeat
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.