Table of COntent

Name: Table of COntent
Author: Christophe Carvalho Vilas-Boas

By Christophe Carvalho Vilas-Boas

Display a table of content for your content types

Latest version

v1.1.6

released July 9, 2026

npm install strapi-plugin-table-of-content

Strapi v5 - Plugin Table of Content

Strapi Plugin that displays a table of content for your content types

A plugin for Strapi Headless CMS that displays a table of content for your content types

Features

Display a table of content for your content types

Usage

To configure the Table of Content plugin, add your configuration to the plugin settings. The configuration consist of an object with the content types:

type Config = {
  contentTypes: {
    uid: string;
    fields: {
      type: "separator";
    } | {
      type: "primitive";
      name: string;
      displayLabel?: boolean;
      displayIcon?: boolean;
    } | {
      type: "dynamiczone";
      name: string;
      displayLabel?: boolean;
      components?: {
        name: string;
        level?: null | number | {
          field: string;
        };
        displayIcon?: boolean;
      }[];
    }[];
  }[];
}

Example Configuration

// config/plugins.ts
import type { Config as TableOfContentConfig } from 'strapi-plugin-table-of-content/dist/server/src/config'

export default () => ({
  'table-of-content': {
    enabled: true,
    config: {
      contentTypes: [
        {
          uid: 'api::page.page',
          fields: [
            {
              type: 'primitive',
              name: 'title',
              displayLabel: true,
              displayIcon: true,
            },
            {
              type: 'separator',
            },
            {
              type: 'dynamiczone',
              name: 'content',
              displayLabel: true,
              components: [
                { name: 'content.title', level: { field: 'level' } },
              ],
            },
            {
              type: 'separator',
            },
            {
              type: 'dynamiczone',
              name: 'extraContent',
              displayLabel: true,
              components: [
                { name: 'content.title', level: { field: 'level' } },
                { name: 'content.rich-text', level: null }, // null means the component is not displayed
                { name: 'content.image-text', level: null }, // null means the component is not displayed
              ],
            },
          ],
        },
      ],
    } satisfies TableOfContentConfig,
  }
})