Components
Table of Contents

Table of Contents

Provides a floating sidebar with a table of contents, offering quick navigation through document headings with visual indicators for the current section.

Get the code ->

Table of Contents

The Table of Contents (TOC) feature allows you to create an automatically updated overview of your document's structure.
How to use the Table of Contents:
  • Type "/toc" and press Enter to create the TOC.
  • The TOC updates automatically when you modify headings in the document.


Example Content

This is an example of content that would be reflected in the Table of Contents.

Subsection

Adding or modifying headings in your document will automatically update the TOC.

Benefits of Using TOC

A Table of Contents improves document navigation and provides a quick overview of your content structure.

Installation

Install the following dependencies:

npm install @udecode/plate-heading @radix-ui/react-slot @radix-ui/react-tooltip @radix-ui/react-popover

Copy and paste the following code into your project.

Get the code ->

Update the import paths to match your project setup.

ResizableTurn Into Dropdown Menu