Layout/Partial alternative for a static site?

I am testing a simple static site and hosting it on Firebase. I can’t use partials or layouts due to Firebase not supporting server side code (I think?). So how would I go about making a simple nav bar display on my static pages? Would I have to build it on each page?

I could build it once and copy it to each page as the navbar won’t be updated often and I will only have 10ish pages, but I was hoping there is a better way. If not, would I have to go into the code view and copy the code for the navbar since you can’t seem to move elements between pages?

Create a web component as in

  1. Create a JS file in a JS folder or similar and enter the following code:
class Navbar extends HTMLElement {
    constructor() {
        super()
        this.innerHTML = `
        
        `

    }
}

window.customElements.define('navigation-bar', Navbar)

  1. Add a navigation bar to the HTML document:

  1. Cut the navigation bar from the HTML document

  1. Paste the navigation bar into the JS document and save the document.

  1. Add the following two lines to the HTML document:

Add the same two lines to all documents that require the navigation bar.

Edit: You could do something similar for the footer:

4 Likes

Works perfectly. Thanks for the detailed instructions!

1 Like