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.