Navigation
Table of contents
A table of contents is a linked list of a page's own headings that shows a long article's structure and lets readers jump straight to one part.
- Also called
- TOC, On this page, Jump links, In-page navigation
- Browse examples
- Blog pages →
What is a table of contents?
On SaaS sites the table of contents shows up wherever a page is long enough to scroll for minutes: documentation, long blog posts and guides, legal pages and pricing-terms pages. Polar's pricing page carries a contents list naming six parts, from "Introduction" to "Dispute/Chargeback Fees", and Blacksmith's careers page puts its values in widgets beside a table-of-contents sidebar.
In docs it usually sits in a narrow right-hand column labeled "On this page", highlighting the heading currently in view as the reader scrolls. On blog posts it is often a sticky block in the left margin or a collapsible box above the first paragraph. Either way it does two jobs: a preview of what the article covers, and a shortcut for readers who only need one section.
A useful table of contents mirrors real, descriptive headings. If the headings are vague ("Overview", "Details", "More") the list is useless, and that is usually a sign the article's structure needs work, not the navigation.
When to use a table of contents, and when not to
Use it for
- Long-form articlesA guide or post with five or more substantial sections that readers may want to skip between.
- Reference pagesDocs and API pages where readers arrive looking for one specific heading.
- Legal and policy pagesTerms and privacy pages where people need to find one clause quickly.
Avoid it for
- Short pagesA page with three short sections can be scanned faster than a list of links to them.
- Marketing homepagesLanding pages are designed to be scrolled in order; in-page jump links undercut the narrative.
- Vague headingsIf the headings don't describe their sections, fix them before listing them.
Anatomy of a table of contents
- 1LabelA short title such as "On this page" or "Contents".
- 2Heading linksOne link per section heading, in page order.
- 3NestingIndented sub-items for second-level headings, usually only one level deep.
- 4Active highlightThe link for the section in view, bolded or marked with a bar as the reader scrolls.
Common table of contents variants
1. Right-rail "On this page"
A sticky column beside docs content, the standard in documentation sites.
2. Sticky blog sidebar
A left- or right-margin list that follows the reader down a long post.
3. Inline contents box
A bordered or collapsible list above the first section, common on legal pages and guides.
Spotted in our design reviews
Where our reviews mention a table of contents:
Values and benefits live in desktop-window widgets with a table-of-contents sidebar.
Blacksmith · Careers pages
A contents list names six parts, from "Introduction" to "Dispute/Chargeback Fees".
Polar · Pricing & Plans
Often confused with
Table of contents vs. sidebar
A docs sidebar lists every page in the documentation. A table of contents lists only the headings within the current page.
Table of contents vs. tree
A tree shows a whole hierarchy of pages or files with expandable branches; a table of contents is a short, flat-ish list for one page.
Frequently asked
Does a table of contents help SEO?
It can help indirectly: the anchor links give search engines clear section names and sometimes appear as jump links in results. The main benefit is still for readers, who find what they came for faster.
Should the table of contents be sticky?
On long docs and blog posts, yes, on desktop. On mobile, collapse it into a short box near the top so it doesn't cover the text.