What is the best way to design a consistent navbar that can be used across multiple HTML pages using Bootstrap 5?

Preferably, I would like to achieve this using only JavaScript without the need for a JavaScript framework in my project.

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

I am looking to create a consistent navbar across all pages so that I can easily update it without having to change each page individually every time the order of links is modified.

Here is an example of the navbar structure I have in mind:

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

javascripthtmlcssbootstrap-5

Answer №1

If you require browser support, consider using template literals (back ticks) to define your navigation and then utilize insertAdjacentHTML to position it across all your HTML pages. For simpler pages, inserting the nav after the body tag might suffice.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the most effective techniques for utilizing JavaScript modules in both the Server and Browser environments?

Currently, I am in the process of developing a JavaScript project that utilizes NodeJS. There are certain objects that need to be shared between the client and server side. I attempted to employ the module system in Node, but struggled to find an appropria ...

javascriptnode.jsmodule

I am experiencing an issue with my css dropdown menu appearing incorrectly on both Internet Explorer and Firefox

Chrome and Safari are working perfectly fine, but I encountered an issue with IE and FF where the submenu menu appears on the left side of the main navigation. The website in question is cedumilam.php.cs.dixie.edu. Below is the CSS code I am using: # ...

jqueryhtmlcssinternet-explorerfirefox

Transfer JSON data between controllers without utilizing Services or Factory in AngularJS during routing

On my Dashboard page, I have an Object. When a user clicks on the Details Page from the Dashboard, it should redirect to the Details page. I am looking to pass the JSON Object from the Dashboard Controller to the Details Controller. Is there a way to do ...

javascriptangularjsjson

Issues with ng-repeat not functioning properly within a Popover

I have a list that I am looping through using ng-repeat: <div class="row msf-row" ng-repeat="record in recordlist people-popover> <div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem"> <button class="btn ...

javascriptangularjstwitter-bootstrappopover

Switching the placement of my menu bar to the other side of my logo

Can anyone help me figure out how to move my menu bar to the opposite side of my logo? I attempted using the position relative in CSS but it didn't reposition correctly. I've included the position:relative in the CSS code of my HTML index file, ...

htmlcss

Immediately Invoked Function Expression in Javascript

const user = { name: "John", age: 30, lastName: "Smith" } (({name, lastName}) => { console.log(name); console.log(lastName); })(user); An error occurred: {(intermediate value)(intermediate value)(intermediate value)} is not function ...

javascriptjqueryjsonreactjsobject

The text content is not in alignment with the server-rendered HTML for translation purposes with i18n

I have successfully implemented i18n in my Next.js project. The folder structure for my locales is as follows: public/locales/en/translation.json and public/locales/fr/translation.json The error I am encountering is: Uncaught Error: Text content does n ...

javascriptreactjsnext.jsserver-side-renderingi18next

Is there a way for me to generate a tab that shows content when hovered over?

Is it possible to create a tab that displays a vertical list of redirections when the mouse hovers over it, and hides when the mouse is moved away? This seems like a challenging task. Can someone guide me on how to achieve this, especially if it involves ...

c#javascripthtmlcss

When implementing .forEach, an object within the array is mistakenly duplicated

Struggling to populate an array of objects with unique data using the .forEach function to display feedback in the Administrator page of my portfolio. However, encountering an issue where the objects from 'd' are getting duplicated in the 'f ...

javascriptarraysreactjstypescript

Checkbox failing to trigger

Check out my code snippet here: http://jsfiddle.net/raficsaza/mgukxouj/ I'm facing an issue with the checkbox in this code. It seems to be stuck at a false value and I can't get it to change. Is there a way to work with the "input" tag instead o ...

htmlcsscheckbox

Creating Projects Without a Build System in Sublime Text 3

I'm having trouble getting the sublime build system to function properly. When attempting to run my code, I receive a "No Build System" error message. I have already set the build system to Automatic under Tools->Build Systems and saved the file a ...

javascriptnode.jssublimetext3build-system

Identifying and categorizing flip switches with jQuery without relying on div elements

Is it possible to have two jQuery flip switches side by side, but only one visible if the screen is too narrow? I've tried assigning different classes to each switch for styling purposes, but it doesn't seem to work correctly. When I assign a cl ...

jqueryhtml

Show information according to the user's input

I am working on a page layout that includes two columns: Side and Middle. Within the side column, there is a form containing a date input and a button labeled "View Summary Report." Upon selecting a date and clicking the button, the goal is to retrieve d ...

javascriptphphtml

Troubleshooting a problem with the skybox texture in Three.js

I am currently experimenting with creating a basic Skybox using Three.js, but I've encountered an issue where the texture I'm applying to the cube is only visible on the outside and not on the inside. Below is the code for my skybox: const path ...

javascriptwebglthree.js

CRUD operations are essential in web development, but I am encountering difficulty when trying to insert data using Express

I am currently attempting to add a new category into the database by following the guidelines provided in a course I'm taking. However, I am encountering difficulties as the create method does not seem to work as expected. When I try it out in Postman ...

javascriptnode.jsmongodbexpressmongoose

Steps for triggering an event based on a user-provided time input

I'm developing an AC controlling application that allows users to specify a time for all building AC units to be automatically turned off using HTML, jQuery, and CSS. I need to implement a feature where the system compares the user-entered time with t ...

jqueryhtmleventstime

Adjusting the hue of each fifth div

There are multiple divs in a row, with 4 divs in each row. To adjust the padding of every 4th div, I'm using the nth-child selector. Now, I am looking to modify the rollover property every 5th time. Here is an example of what I have in mind: .cont ...

htmlcsscss-selectors

Struggling to properly position navigation bar items in a Bootstrap website

I'm struggling to align the bar items on a new site that I've built. I've tried placing two bars at the top to mimic the layout of this site: . I'd like it to look similar to this site: , where everything is nicely centered and mobile-f ...

htmlcssbootstrap-5

Creating an image that scales to full width within a Bootstrap column after switching to mobile view

I am having trouble getting the image on the right to expand to full width when the screen size is reduced, transitioning it to mobile view. Is there a Bootstrap class that works similarly to "img-fluid", but displays the image in full width below the text ...

htmlcsstwitter-bootstrapbootstrap-4

Every DIV is filled with HTML and CSS

My navigation bar currently has icons placed at the center of a DIV, but I would like to fill up the entire DIV without any spaces left on the sides. The HTML code for the DIV containing the icons is as follows: <nav class="navbar navbar-expand navbar ...

htmlcssreactjsbootstrap-4react-bootstrap