The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing

Categories We Write About

Convert folders into clickable HTML navigation

Written by

in

Computer Science

Here’s how to convert a folder structure into a clickable HTML navigation menu. Let’s assume you have a folder structure like this:

bash
/projects
    /project-a
        index.html
        about.html
    /project-b
        index.html
        contact.html

You can convert this into a clickable HTML navigation like this:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Folder Navigation</title>
  <style>
    ul {
      list-style-type: none;
      padding-left: 20px;
    }
    li {
      margin: 5px 0;
    }
    a {
      text-decoration: none;
      color: #007BFF;
    }
    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li>Projects
        <ul>
          <li>Project A
            <ul>
              <li><a href="projects/project-a/index.html">Home</a></li>
              <li><a href="projects/project-a/about.html">About</a></li>
            </ul>
          </li>
          <li>Project B
            <ul>
              <li><a href="projects/project-b/index.html">Home</a></li>
              <li><a href="projects/project-b/contact.html">Contact</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</body>
</html>

Notes:

Replace the href values with your actual folder structure relative to the HTML file.
You can automate this using a backend script (in PHP, Python, Node.js, etc.) if your folder structure changes often.
For dynamic rendering from a filesystem, a script would be needed to scan directories and generate this HTML.

Would you like a script to auto-generate this from folders?

Share this Page your favorite way: Click any app below to share.

See all the ways to share this page

Check Out Our Newest Posts we wrote about

Categories We Write About