<header>
  <button id="home">Home</button>
  <button id="about">About</button>
  <button id="contact">Contact</button>
</header>

<main>
  <h1>HOME</h1>
</main>

function navigate(state) {
  const h1 = document.querySelector("h1");
  h1.textContent = state.path.toUpperCase();
}

["home", "about", "contact"].forEach((path) => {
  const button = document.querySelector("#" + path);
  button.addEventListener("click", () => {
    const state = { path };
    history.pushState(state, "", path);
    navigate(state);
  });
});

window.addEventListener('popstate', (event) => {
  navigate(event.state)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.