Using Bootstrap 5: How can I create a reusable navbar across multiple HTML pages without jQuery?

(I would prefer a strictly JavaScript way of doing this if possible. Not really wanting to introduce a JavaScript framework into my project.)

Layout:
 ./index.html
 ./about.html
 ./crew.html
 ./flights.html
 ./events.html

I want every page to have the same navbar such that I don't have to repeat myself and fix every page every time the order of the links change.

Here's my example navbar:

<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>

CodePudding user response：

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 >
    <button
        
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#toggleMobileMenu"
        aria-controls="toggleMobileMenu"
        aria-expanded="true"
        aria-label="Toggle Navigation"
        >
    <span ></span>
    </button>
    <div  id="toggleMobileMenu">
        <ul >
            <li >
                <a  href="index.html">Home</a>
            </li>
            <li >
                <a  href="about.html">About</a>
            </li>
            <li >
                <a  href="crew.html">Crew</a>
            </li>
            <li >
                <a  href="flights.html">Flights</a>
            </li>
            <li >
                <a  href="events.html">Events</a>
            </li>
        </ul>
    </div>
</nav>
`
document.getElementById("nav-container").insertAdjacentHTML('afterbegin', navigation);

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>