Search code examples
htmldirectoryhyperlink

Navbar links with varying directory


my directory is shaped like this image

in order to use my navbar between different html files, I made it into a seperate html file and use a placeholder to insert it where i need it. the problem is that now the links get thrown off. for example: when im on the index file, the link <a href="index.html"></a> works without a problem. however, when im in the about_us file, the link <a href="index.html"></a> throws a cannot find in directory error because it would need ../ in front of the link. any javascript I have also does not work for the nav.html. any suggestions? is there a way to create links and start the directory from the root?


Solution

  • To navigate to the correct HTML file, you have to pass the full path of the HTML file.

    For eg: If your application is running in https://localhost:8080 than you have to pass the full path as below:

    <a href="http://localhost:8080/root/index.html">Home</a> 
    <a href="http://localhost:8080/root/html-files/about_us.html">About Us</a>
    

    Or if you directly opening the HTML file in your browser without any server, than pass the full path of your project folder as below:

    <a href="file:///C:/Users/.../your-project-name/root/index.html">Home</a> 
    <a href="file:///C:/Users/.../your-project-name/root/html-files/about_us.html">About Us</a>
    

    Note: Always use the file or folder name with a hyphen - or underscore _.

    For eg: instead of html files rename your folder name as html_files or html-files.