How to Build a Table of Contents (ToC) in Ycode

A Table of Contents (ToC) makes long-form content easier to navigate by giving readers a quick overview and letting them jump to specific sections. It improves the user experience and helps readers find what they’re looking for faster.

It’s also good for SEO, as it creates internal anchor links and gives structure to your page content.

Ycode doesn’t have a native ToC element yet, but it’s on our roadmap. In the meantime, you can implement a custom solution with a bit of code—easy to set up and fully dynamic.

How to Implement a ToC in Ycode

This solution works best in CMS pages with the Rich Text element, for example Blog posts, Articles, or Documentation. It automatically detects headings (h2-h6) in your content and builds a structured ToC linking to each section.

1. Add a ToC Block to Your Page

Add a block to your layout where you want the ToC to appear (e.g., in a sidebar or a section above the content). In the right Sidebar, choose settings and under Attributes give it the ID of "toc".

2. Add an ID to your content wrapper block

For the script to work correctly, the Rich Text element (or any content with headings) must be inside a wrapper with the ID: "content"

This ensures that only headings inside this block are used in the Table of Contents—not headings elsewhere on the page.

3. Paste the JavaScript Code

This script dynamically scans for all h2 to h6 headings on the page, assigns them IDs if missing, and generates a nested list that reflects the structure of your content.

In your Project Settings → General → Custom Code, paste the following script into the Body section:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const tocContainer = document.getElementById("toc");
  if (!tocContainer) return;

  const headings = [...document.querySelectorAll("h2, h3, h4, h5, h6")];
  const rootList = document.createElement("ul");
  rootList.className = "toc-list toc-level-2";
  let lastListAtLevel = { 2: rootList };

  headings.forEach((heading, index) => {
    const level = parseInt(heading.tagName.substring(1)); // h2 = 2, h3 = 3, etc.

    if (!heading.id) {
      heading.id = `section-${index}`;
    }

    const link = document.createElement("a");
    link.href = `#${heading.id}`;
    link.textContent = heading.textContent;
    link.className = "toc-link";

    const listItem = document.createElement("li");
    listItem.className = `toc-item toc-level-${level}`;
    listItem.appendChild(link);

    const nestedList = document.createElement("ul");
    nestedList.className = `toc-list toc-level-${level + 1}`;
    listItem.appendChild(nestedList);

    let parentList = lastListAtLevel[level - 1] || rootList;
    parentList.appendChild(listItem);

    lastListAtLevel[level] = nestedList;
  });

  tocContainer.appendChild(rootList);
});
</script>

4. Add Styling with CSS

To make the Table of Contents look clean and structured, you’ll need to use a bit of custom CSS. This will handle the spacing, font sizes, indentation, and hover behavior.

Go to Project Settings → General → Custom Code, and paste the following script into the Head section:

<style>
#toc {
  position: sticky;
  top: 80px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1rem;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: sans-serif;
  font-size: 14px;
  line-height: 1.6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

#toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-link {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.toc-link:hover {
  color: #0070f3;
}

.toc-level-2 .toc-link {
  font-size: 16px;
  font-weight: 600;
  margin-left: 0;
}
.toc-level-3 .toc-link {
  font-size: 15px;
  margin-left: 16px;
}
.toc-level-4 .toc-link {
  font-size: 14px;
  margin-left: 32px;
}
.toc-level-5 .toc-link {
  font-size: 13px;
  margin-left: 48px;
}
.toc-level-6 .toc-link {
  font-size: 12px;
  margin-left: 64px;
}
</style>

You can adjust the look and feel of the ToC by changing any of the CSS properties. This gives you full control over how the Table of Contents fits into your page design.

Example Output

If your page contains this content:

<h2>Introduction</h2>
<h3>Getting Started</h3>
<h4>Setup</h4>
<h2>Advanced Topics</h2>
<h3>Optimization</h3>

The ToC will render like this:

- Introduction
   - Getting Started
     - Setup
- Advanced Topics
   - Optimization

Each item links directly to the heading in the content and scrolls smoothly to that section.

Until the Native Element Arrives…

We hope this workaround helps you build a useful and well-structured Table of Contents in your Ycode projects until we release a native element for it.

If you have any questions, run into issues, or have requests for similar solutions—like sticky sidebars, dynamic content navigation, or CMS-linked structures—feel free to share your ideas with us in the Ycode Community.