Agent-readable docs index: /llms.txt. Full docs in one file: /llms-full.txt. Download /docs.zip to grep all markdown files locally.

Table of Contents

The TableOfContentsPanel component renders a vertical list of heading links in the right sidebar with active-state tracking. It highlights the currently visible section as the user scrolls.
<Aside full>
  <TableOfContentsPanel />
</Aside>
Wrap TableOfContentsPanel in <Aside full> so it spans the full page height and stays sticky while scrolling. Without the wrapper, the panel only spans one section.

Why you might need this

By default, Holocron shows the AI Assistant widget in the right sidebar. If you prefer a traditional table of contents instead, add TableOfContentsPanel to any page. You can also use both: place the AI widget and the TOC panel in the same <Aside full> and they stack vertically.

Automatic headings

When used without props, the component reads the current page's headings automatically. No configuration needed.
<Aside full>
  <TableOfContentsPanel />
</Aside>
This picks up every ##, ###, and deeper heading on the page, indented by depth.

Sidebar headings are hidden automatically

Normally the left sidebar shows the current page's section headings inline, under the active page entry. When a page renders a TableOfContentsPanel, Holocron detects it at build time and hides that inline list — the same headings would otherwise appear twice, once in each sidebar.
No configuration is needed. To override the behavior, set the sidebarToc frontmatter field:
---
title: My Page
# true: show sidebar headings even with a TableOfContentsPanel present
# false: hide sidebar headings on any page, panel or not
sidebarToc: true
---
Sidebar search still matches and shows headings regardless of this setting, so heading results stay reachable.

Custom title

Change the label above the heading list with the title prop. Defaults to "On this page".
<Aside full>
  <TableOfContentsPanel title="Contents" />
</Aside>

Adding it to every page

To show a TOC on every page without repeating the MDX snippet, create a shared snippet file and import it:
snippets/toc.md
<Aside full>
  <TableOfContentsPanel />
</Aside>
Then import it at the top of each page:
getting-started.mdx
import Toc from '/snippets/toc.md'

<Toc />

## First heading

Content here...
See Local Imports for more on reusable snippets.

Props

titlestring
Label shown above the heading list.
headingsNavHeading[]
Custom list of headings to display. When omitted, the component reads the current page's headings automatically. Each entry has slug, text, and depth fields.
classNamestring
Additional CSS class name for the outer <nav> element.
Powered byHolocron