Displaying Navbar on Multiple HTML Pages Using Bootstrap

How can I create a reusable navbar across multiple HTML pages with Bootstrap 5?

Depending on what kind of browser support you need you could use a template literal (back ticks) to define your navigation. Then use insertAdjacentHTML to place it where you need it on all your html pages. If your page is fairly simple you could just insert the nav after begin on the body tag.

const navigation = `
<nav class="navbar navbar-expand-xl navbar-light">
    <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#toggleMobileMenu"
        aria-controls="toggleMobileMenu"
        aria-expanded="true"
        aria-label="Toggle Navigation"
        >
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse show" id="toggleMobileMenu">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item text-center">
                <a class="nav-link" href="index.html">Home</a>
            </li>
            <li class="nav-item text-center">
                <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item text-center">
                <a class="nav-link" href="crew.html">Crew</a>
            </li>
            <li class="nav-item text-center">
                <a class="nav-link" href="flights.html">Flights</a>
            </li>
            <li class="nav-item text-center">
                <a class="nav-link" href="events.html">Events</a>
            </li>
        </ul>
    </div>
</nav>
`
document.getElementById("nav-container").insertAdjacentHTML('afterbegin', navigation);

<div id="nav-container"></div>

How can I reuse and html navbar on each page of my website?

On your site you are loading jquery in the head and then loading jquery slim in the foot of your page. In jquery slim load() is not supported. Instead of loading 2 versions of jquery lust load the full version of jquery in your foot section and place your jquery code after that. Here is how your page should look:

<!DOCTYPE html>
<html lang="en">
<head>

</head>

<body>

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

</div>


<!--end of Navigation bar-->


<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
$(function(){
  $("#nav-placeholder").load("navbar.html");
});
</script>
</body>

Bootstrap nav-bar available to all my html pages

If you are trying to add the same content on different pages you need to create an element with the same id, create a external .js file with the content you want to repeat, and call it from the bottom of the page.

General example:

<div id="demo"></div> <!-- this where the content would be. Create this div on different pages and embed the script inorder to get content. -->
<script src="demo.js"></script>

demo.js file: 
<script>
var nav = // the content - example of bootstrap's nav
'<nav class="navbar navbar-expand-lg navbar-light bg-light">'+
'  <a class="navbar-brand" href="#">Navbar</a>'+
'  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">' +
'    <span class="navbar-toggler-icon"></span>' +
'  </button>' +
'  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">'+
'    <div class="navbar-nav">'+
'      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>' +
'      <a class="nav-item nav-link" href="#">Features</a>' +
'      <a class="nav-item nav-link" href="#">Pricing</a>' +
'      <a class="nav-item nav-link disabled" href="#">Disabled</a>' +
'    </div>' +
'  </div>' +
'</nav>';

var demo = document.getElementById('demo'); // target element.
demo.insertAdjacentHTML('beforeend', nav); // add content.
</script>

Read this for more possibilities, Hope that help.

Single navigation bar across website?

JQuery

As JQuery is JS-based, you might be allowed to use it. You could then add a navigation div into each page's template:

<div id="navigation"></div>

and include a script on each page that executes the following JQuery-code:

$(function() {
    $("#navigation").load("navigation.html");
});

Pure JavaScript

Alternatively, if you cannot use JQuery whatsoever, you could use plain JavaScript, which is more lightweight but not as clean.

Wherever you want to include the navigation, simply include a script:

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

Which holds your navigation based on document.write:

document.write('<div>\
    ... your navigation content ...\
    </div>\
');

Displaying Navbar on Multiple HTML Pages Using Bootstrap

How can I create a reusable navbar across multiple HTML pages with Bootstrap 5?

How can I reuse and html navbar on each page of my website?

Bootstrap nav-bar available to all my html pages

Single navigation bar across website?

Related Topics

Leave a reply