---
title: "Table of Contents — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Nabeel · Navigation. About Easy to install CMS richtext table of contents."
canonical: "https://framer.elliotli.dev/component/table-of-contents"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Table of Contents

# Table of Contents

[View on Framer](https://framer.com/marketplace/components/table-of-contents/?via=elliot-li)

![Table of Contents preview image 1](https://framer.elliotli.dev/og/component/table-of-contents/4e41e46e5df160f6/1600x1200.jpg)

## Summary

About Easy to install CMS richtext table of contents.

## Description

## About

Easy to install CMS richtext table of contents. No need for complex overrides and customs. Just copy paste and customize. Customize text styling, indentation, spacing and y-offset.

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

Instruction Video

1.  Copy the component to the designer CMS details page
    
2.  Connect the richtext to the component
    
3.  By default, all headings of the page will be displayed
    
4.  To only show the headings of the rich text, add a section ID to the rich text layer
    
5.  Paste the same ID to the the component
    
6.  Customise the look
    
7.  Preview to see the change
    

## How it Works

You can set which section to create a table of contents for, adjust colors for normal, active, and hover states, and control spacing and indentation. You can choose which heading levels to show and customize fonts for each level. There's also an option to set an offset for smooth scrolling.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-a9pn4bzl-gCNDp619NosmMW4StIx5YQSoNvySpO)

## Support

For any queries, refunds and help setting up the component, contact hello@segmentui.com

## Rank history [How rankings work →](/terms#rankings)

-   All · #1904

## Details

- **Author**: Nabeel
- **Price**: $15.00
- **Published**: 2025-07-31
- **Updated**: 2025-08-07
- **Added**: 2025-07-28
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation