Table of contents widget in Ghost

A well-structured table of contents can significantly improve the user experience on your Ghost CMS site. Whether you're publishing long-form articles, comprehensive guides, or technical documentation, the Table of Contents widget provides readers with quick navigation and helps them find the information they need efficiently.

This widget automatically generates a clickable table of contents based on your article's heading structure, making it easier for visitors to scan content and jump to specific sections. Perfect for improving readability and reducing bounce rates on content-heavy pages.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.32.2/tocbot.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.32.2/tocbot.min.js"></script>

<style>
.js-toc {
  font-size: 0.875rem;
  font-family: system, sans-serif;
  position: fixed;
  top: 5rem;
  right: 2rem;
  background: #fff;
  color: #222;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toc-toggle + .js-toc { display: none; }
.toc-toggle.active + .js-toc { display: block; }    
.toc-list { padding: 16px; display: flex; flex-direction: column; gap: 6px; line-height: 1.25; }
.toc-list .toc-list { padding: 0; padding-left: 8px; }
.toc-list.is-collapsible:not(.is-collapsed) { margin-top: 8px; }
.toc-link:before { background-color: transparent; }
.is-active-link { font-weight: 400; color: var(--ghost-accent-color)!important; }
.is-active-link::before { background-color: var(--ghost-accent-color); }
.toc-link::before { max-height: 20px; }
.toc-toggle { 
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
  position: fixed;
  top: 4rem;
  right: 1rem;
  z-index: 100;
  padding: 8px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  color: #222;
  display: flex;
  cursor: pointer;
    
  & .icon-close { display: none; }
  &.active .icon-close { display: block; }
  &.active .icon-menu { display: none; }
}
</style>

The above code loads external CSS and JavaScript from CDN. Adds custom styling for positioning, colors, and interactions

<button class="toc-toggle" onclick="this.classList.toggle('active')">
  <svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-menu"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6h16" /><path d="M7 12h13" /><path d="M10 18h10" /></svg>
  <svg  xmlns="http://www.w3.org/2000/svg"  width="20"  height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-close"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
</button>
<div class="js-toc"></div>
<script>tocbot.init({
  // Where to render the table of contents.
  tocSelector: '.js-toc',
  // Where to grab the headings to build the table of contents.
  contentSelector: '.post-template .ghost-content',
  // Which headings to grab inside of the contentSelector element.
  headingSelector: 'h1, h2, h3',
  // For headings inside relative or absolute positioned containers within content.
  hasInnerContainers: true,
});
</script>

The above code adds a toggle button to the top right corner of the page. When clicked, it toggles the visibility of the table of contents. The important part is the contentSelector, which might be different for your site.

In this instance the toc will be generated only on post templates, and looking for the headings inside the element that has the class ghost-content.

Table of contents demo

Table of contents widget

Table of contents widget script & style

Table of contents widget setup