how to reuse my html navbar code on every page

Question

I have this for my navbar:

     <div class="dropdown">
            <a href="#header" class="smoothScroll" class="dropdown">Company</a>
            <div class="dropdown-content">
                <a href="index.html#about">About Us</a>
                <a href="site-pictures.html">Portfolio</a>
                <a href="team.html">Leadership Team</a>
            </div>
        </div>

and what I want to do is put it on all of my pages, so i want to create like a component, where i can then place it in every page without copying line for line. like react.

so i will do this:

navbar = {

<div class="dropdown">
        <a href="#header" class="smoothScroll" class="dropdown">Company</a>
        <div class="dropdown-content">
            <a href="index.html#about">About Us</a>
            <a href="site-pictures.html">Portfolio</a>
            <a href="team.html">Leadership Team</a>
        </div>
    </div>

}

then i want to put the navbar component into each page. is this possible using html?

here is what I tried with help from comment:

<li>
        <div id="side-bar"></div>
        <script>

        document.getElementById("side-bar").innerHTML = <div class="dropdown">         <a href="#header" class="smoothScroll" class="dropdown">Company</a>         <div class="dropdown-content">             <a href="index.html#about">About Us</a>             <a href="site-pictures.html">Portfolio</a>             <a href="team.html">Leadership Team</a>         </div>     </div>
      </script>
        </li>

if you use vanilla js, you can use innerHtml function, and run it on page load. — Oleksandr Paiziak, Sep 05 '21 at 16:08
just basic and plain ol html. JQuery I can add on easily. Must be static stuff, cannot do any server side, need to host on github lol — gianluca, Sep 05 '21 at 16:12
Does this answer your question? [Include another HTML file in a HTML file](https://stackoverflow.com/questions/8988855/include-another-html-file-in-a-html-file) — AaronJ, Sep 05 '21 at 16:13
document.getElementById("side-bar").innerHTML = `
Company
About Us Portfolio Leadership Team

` you should add element with `id` `side-bar` to append your element there Better to move this code to separate function and just call it on all your pages — Oleksandr Paiziak, Sep 05 '21 at 16:14
here is one answer https://stackoverflow.com/questions/18930361/how-to-load-another-html-file-using-js/18930681 — Oleksandr Paiziak, Sep 05 '21 at 16:17
@OleksandrPaiziak i tried what you siad, but it isn't showing up. Please see edited question to show code i put in — gianluca, Sep 05 '21 at 16:18
@OleksandrPaiziak i fixed it, it had to have quotes around the html code. thank you 4 ur help! — gianluca, Sep 05 '21 at 16:20
could you try example from my previous message. your problem is that you should pass string `document.getElementById("side-bar").innerHTML = '

'` — Oleksandr Paiziak, Sep 05 '21 at 16:20

score 0 · Answer 1 · answered Sep 05 '21 at 16:24

0

You can use innerHtml document.getElementById("side-bar").innerHTML = '<div class="dropdown"> </div>'

Or review another link on this site How to load another html file using JS

answered Sep 05 '21 at 16:24

Oleksandr Paiziak

382
2
5

score 0 · Answer 2 · answered Sep 05 '21 at 16:29

what i did, following the help of the comments is this:

  //navbar
document.getElementById("nav-bar").innerHTML = '<ul class="nav-menu list-unstyled"> <li><a href="index.html" class="smoothScroll">Home</a></li> <li> <div class="dropdown"> <a href="#header" class="smoothScroll" class="dropdown">Company</a> <div class="dropdown-content"> <a href="index.html#about">About Us</a><a href="site-pictures.html">Portfolio</a> <a href="team.html">Leadership Team</a>  </div> </div> </li> <li><a href="index.html#services" class="smoothScroll">Services</a></li> <li><a href="#contact" class="smoothScroll">Contact</a></li> </ul>'

in my main.js file, i have that code above. then inside all of my html files, i have this: <div id="nav-bar"></div>. it works perfect.

how to reuse my html navbar code on every page

2 Answers2