Google Sheets, Sites

Output Google Site Navigation list to Markdown with Google Developer Tools

Here's a Javascript and instructions Gemini wrote me to read the Google Site navigation pane, after I expand it manually.

Navigate to your page. 

Press Ctrl-Shift-I to open Chrome's Developer tools.

Click the hamburger menu at the top-left, and carefully expand the hierarchy without clicking any links.

Click the Console tab.  

Copy and paste this code to the > prompt 

Update the sitePath and press Enter:

(function() {

  // 1. Target all navigation link elements in order

  const navLinks = document.querySelectorAll('nav a[href], [role="navigation"] a[href], .navigation-drawer a[href]');

  const results = [];

  const uniqueUrls = new Set();

  const baseDomain = "https://sites.google.com";

  const sitePath = "/site/axusdev"

  navLinks.forEach(link => {

    let rawUrl = link.getAttribute('href');

    if (!rawUrl) return;

    // Clean up anchors and trailing Google login codes like ?authuser=0

    rawUrl = rawUrl.split('#')[0].split('?')[0];

    // Convert relative layout paths into full URLs

    let fullUrl = rawUrl.startsWith('http') ? rawUrl : baseDomain + rawUrl;

    if (!uniqueUrls.has(fullUrl) && fullUrl.includes(sitePath)) {

      uniqueUrls.add(fullUrl);

      // Get the nesting depth level from Google's data attribute (defaults to 1 for top-level)

      let level = parseInt(link.getAttribute('data-level'), 10) || 1;

      // Extract and clean the menu text label

      let name = link.innerText.trim() || link.textContent.trim();

      if (!name) {

        let segments = fullUrl.split('/');

        name = segments[segments.length - 1].replace(/[-_]/g, ' ');

      }

      // Generate a visual branch prefix based on how deep the subpage is nested

      let prefix = "";

      if (level === 1) {

        prefix = "• ";               // Top-level item

      } else if (level === 2) {

        prefix = "  └─ ";            // Level 2 subpage

      } else if (level === 3) {

        prefix = "    └─ ";          // Level 3 subpage (like your WSL item)

      } else {

        prefix = " ".repeat((level - 1) * 2) + "└─ "; // Catch-all for even deeper nesting

      }

      results.push({ visualName: prefix + name, url: fullUrl });

    }

  });

  // 2. Clear console and print without sorting (preserves layout order)

  console.clear();

  console.log("--- HIERARCHICAL SITE NAVIGATION LIST (Copy below this line) ---");

  let outputString = results.map(item => `${item.visualName}\t${item.url}`).join('\n');

  console.log(outputString);

})();

Right-click and select Copy Console.

Create a Google Doc and name it Site Directory.

Go to Tools > Preferences and turn on Enable Markdown.

Now when you can paste the console output into a Google Doc, it will be formatted as a hierarchical list of links.

While editing your Google Site, you can Insert , scroll down and click Docs, select "Site Directory", and click Insert.

Output Google Site Navigation list to TSV 

Instead of outputting Markdown, we can output to Tab Separated Values.

Navigate to your Google Site in Chrome browser.  Make sure you are viewing the published site, and not editing.

Press Ctrl-Shift-I to open Chrome's Developer tools.

Click the hamburger menu at the top-left, and carefully expand the hierarchy (starting from the bottom) without clicking any links.

Click the Console tab.  

Copy and paste this code to the > prompt.

Copy and paste this code to the > prompt 

Update the sitePath and press Enter:

(function() {

  const navLinks = document.querySelectorAll('nav a[href], [role="navigation"] a[href], .navigation-drawer a[href]');

  const results = [];

  const uniqueUrls = new Set();

  const baseDomain = "https://sites.google.com";

  const sitePath = "/site/axusdev"

  navLinks.forEach((link, index) => {

    let rawUrl = link.getAttribute('href');

    if (!rawUrl) return;

    // Clean up anchors and trailing Google login codes like ?authuser=0

    rawUrl = rawUrl.split('#')[0].split('?')[0];

    // Convert relative layout paths into full URLs

    let fullUrl = rawUrl.startsWith('http') ? rawUrl : baseDomain + rawUrl;

    if (!uniqueUrls.has(fullUrl) && fullUrl.includes(sitePath)) {

      uniqueUrls.add(fullUrl);

      // Extract the nesting depth level from Google's data attributes

      let currentLevel = parseInt(link.getAttribute('data-level'), 10) || 1;

      // Peek at the NEXT item in the loop to determine if this link is a parent node

      let isParent = false;

      if (index + 1 < navLinks.length) {

        let nextLink = navLinks[index + 1];

        let nextLevel = parseInt(nextLink.getAttribute('data-level'), 10) || 1;

        // If the next item is deeper in the tree, this item is a parent node

        if (nextLevel > currentLevel) {

          isParent = true;

        }

      }

      // Extract and clean the menu text label

      let name = link.innerText.trim() || link.textContent.trim();

      if (!name) {

        let segments = fullUrl.split('/');

        name = segments[segments.length - 1].replace(/[-_]/g, ' ');

      }

      // Apply proper title capitalization

      name = name.replace(/\b\w/g, char => char.toUpperCase());

      // If it is a parent node, apply bold Markdown markdown formatting and ignore URL

      if (isParent) {

        name = `**${name}**`;

fullUrl = ' '

      }

      // Separate Name and URL with a literal Tab character (\t)

      results.push(`${name}\t${fullUrl}`);

    }

  });

  // Clear console and print the raw copyable block

  console.clear();

  console.log("--- COPY BLOCK ---");

  console.log(results.join('\n'));

})();

Select the items below "--- COPY BLOCK ---", right-click, and Copy.