javascriptphphtmlcssnavbar

How can I display my Navbar Code in multiple HTML documents by linking to one document containing the HTML Code on Desktop and Mobile?


I have a blog type website I am creating and I would like to have the code for my navbar appear on multiple pages on the website, but be linked from one file. I would like it to be linked in the same way that CSS & Javascript documents are linked to an html document.

I am a bit new to webcoding so I apologize in advance if I do not explain something properly and I am happy to clarify if anyone has any questions

The website is using HTML, CSS, Javascript and Bootstrap 5 CSS & Scripts. I'm open for using other coding languages if that is recommended.


Solution

  • I'm open for using other coding languages if that is recommended.

    Than I would suggest using a server-side language for it. PHP could be very easy:

    Your main file (index.php) should be something like this:

    <html>
    <head>
        <!-- Title & meta tags, etc... -->
    </head>
    <body>
        <?=include("header.php")?>
        <!-- Unique page content goes here -->
    </body>
    </html>
    

    and inside the file header.php just throw your navbar.