https://framer.com/m/Tableofcontents-Z8Qg1H.js
TableOfContents
TableOfContents reads the headings already on the page and lists them — as a vertical outline beside the content, or as the horizontal tab bar this documentation site runs on. It exposes no colour controls at all; every value resolves from the theme.
Examples
Live specimens. Each one is reading this page’s own headings, so the lists below are the sections you are looking at.
Vertical outline
The default: a column of the page’s own headings with an active indicator on the rail. It is reading this page, so the list below is the sections you are looking at.
Horizontal tabs
Set orientation to horizontal and the same component becomes a tab bar — this is what sits under the navigation on every page of this site. tabRail draws the hairline the indicator slides along.
horizontal, rail on
horizontal, centred, no rail
Indicator and indentation
The active indicator can be a line, a circle, a square or a rounded block, and nested levels can be indented or flattened.
circle, size 8
rounded, no indent
Props
Nine grouped controls on the instance panel; each row below is one group and its members.
Usage
Guidance carried over from the component definition.
Reach for TableOfContents
Long documents where the reader needs to see the shape of the page and jump inside it.
The sticky tab bar pattern — same component, orientation set to horizontal.
Pages whose headings change: it reads the DOM, so nothing has to be listed by hand.
Themed sites: it exposes no colour controls at all, every value resolves from the tokens.
Reach for something else
Site navigation. This lists headings inside one page — for pages, use the navigation in the template.
A hand-curated list in a specific order. This follows the document, not an editorial sequence.
Steps a reader works through. MilestoneTimeline or AccordionX carry sequence and state; this only points.
Io — UI Basics
Every list above is a live TableOfContents instance reading this page’s headings. Colour, type and radius resolve from the project theme tokens.