Broken links with a connectedCallback

Hi, I’m just starting off with learning basic Html, CSS and Javascript for Wed Design. I’m trying to make a reusable top menu, so that its easy to edit when things need to change. I’ve found a solution for importing the code into every page. But due to the structure of where viewer is the links are broken depending where they are. Is there a way update the links depending where they are? or instead of …/…/folder/file.html a global way to start from the top of a file tree. ( I hope this makes sense.)

This is the Html I’m using to import the JavaScript

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>--- Work: 2005 to 2022 ---</title>
    <link rel="stylesheet" href="../../CSS/reset.css">
    <link rel="stylesheet" href="../../CSS/style.css">
    <script src="../NAV/header.js" type="text/javascript" defer></script>
</head>

<body>

<!-- STUFF -- >
</body>
</html>

This is the JavaScript

class Header extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.innerHTML = `
    <div class="dropdown">
    <button class="dropbtn">
    <img src="../resources/Images/menu.png" alt="Drop down menu">
    </button>
    <div class="dropdown-content">
    <ul class="noBull">
        <li><a href="About.html">about</a></li>
        </br>
        <p>Work:</p>
        <li><a href="work section 6\Work.html">2005 - 2022</a></li>
        <li><a href="work section 5\Work.html">1997 - 2004</a></li>
        <li><a href="work section 4\Work.html">1990 - 1996</a></li>
        <li><a href="work section 3\Work.html">1980 - 1989</a></li>
        <li><a href="work section 2\Work.html">1976 - 1980</a></li>
        <li><a href="work section 1\Work.html">1969 - 1975</a></li>
        </br>
        <p>Archive:</p>
        <li><a href="Exhibitions.html">exhibitions</a></li>
        <li><a href="Collections.html">collections</a></li>
        <li><a href="text_catalogues.html">text/catalogues</a></li>
    </br>
        <li><a href="Contact.html">contact</a></li>
    </ul>

    
    </div>
    </div>
    `;
    }
}
customElements.define('header-component', Header);