> ## Content Index
> Fetch the complete content index at: https://blog.lsonline.fr/llms.txt
> Use this file to discover other available public pages before exploring further.

# A SPFx Table Of Contents Extension for SharePoint
- URL: https://blog.lsonline.fr/2020/05/13/a-spfx-table-of-contents-extension-for-sharepoint/
- Published: 2020-05-13T13:43:00.000Z
- Updated: 2026-01-27T18:53:52.000Z
- Description: A table of contents for your SharePoint modern pages to direct the readers where they need to be, in addition to making your pages more reader-friendly.
- Author: Laurent Sittler
- Tags: SharePoint Framework, SharePoint Online, Development, JavaScript, Modern Experience

On your SharePoint pages, using a table of contents can be useful to direct the reader to exactly where they need to be, in addition to making your SharePoint pages more reader-friendly.

Currently, no Out-The-Box WebPart or feature exists to generate a Table Of Contents based on the content of the page. It was already the case for the legacy pages (classic experience) of SharePoint. That is why I created a little script for the classic experience of SharePoint that you can find in my other post:

[Create a dynamic Table of Content for your SharePoint Wiki pagesTo facilitate the users experience and win in productivity, implement a dynamic and reusable TOC will help users to access directly to the targeted chapter![](https://blog.lsonline.fr/assets/favicon/apple-touch-icon.png?v=3453d0e8cf)LsOnlineLaurent Sittler![](https://blog.lsonline.fr/content/images/2018/12/LsOnline-SP-TOC-Post.JPG)](https://blog.lsonline.fr/2018/12/23/create-a-dynamic-table-of-content-for-your-sharepoint-wiki-pages/)

Because this little script seems to meet your expectation, I think a Table Of Contents for your SharePoint modern pages can be useful too ?

Below is a preview of the SharePoint Framework extension from SharePoint Online:

![](https://blog.lsonline.fr/content/images/2020/05/LsOnline-SPFx-TOC.gif)

TOC preview

What are the currently supported features:

1. ApplicationCustomizer
2. Can be deployed into the whole Tenant
3. Add a button at the bottom of all pages of the site collection (if at least one header exists on the current page)
4. When clicking on this button, a right panel will open with all clickable headers
5. Change button shape
6. Change button icon
7. Specify supported headers
8. Support headers from H2 to H4

## How to install this extension

If you want to install this extension for all site collections of your Tenant, the easiest way is to deploy it into your Tenant App Catalog directly.

You can just add the extension with a *drag & drop* of the [package](https://gitlab.lsonline.fr/SharePoint/sp-dev-fx-webparts/toc/-/releases?ref=blog.lsonline.fr) `.sppkg` into the **Apps for SharePoint** library or by clicking on **Upload**.

Once done, a modal will appear to deploy the package. If you want to deploy and enable the extension for all sites collections in your Tenant, check the case *"Make this solution available to all sites in the organization"* and click **Deploy**

![](https://blog.lsonline.fr/content/images/2020/05/LsOnline-DeployToc-diaog.jpg)

SharePoint modal to deploy package from App Catalog

Once deployed for all sites, you can go on whatever sites collection with a page with at least one header and you should see something like this:

![](https://blog.lsonline.fr/content/images/2020/05/Screen-Shot-2020-05-10-at-19.10.46.png)

Default TOC button

If the default configuration is not what you want, you can change:

- The shape (`square` or `circle`)
- The UI Fabric icon
- The supported headers (between H2 and H4)

> \[note\]**Note**  
>  
> The button uses the primary color of the site theme

If you wish to edit the configuration, you have to go to the "Tenant Wide Extensions" list located in your Tenant Apps Catalog (only available on the Tenant Apps Catalog)

![](https://blog.lsonline.fr/content/images/2020/02/LsOnline-ScrollToTop-AppsCatalogSiteContent.jpg)

SharePoint Tenant Wide Extensions list located into the Tenant Apps Catalog

Find the item with the `Component Id` that equals `ec4bf35f-7f65-49e7-8b28-c9a59d2d712a`:

![](https://blog.lsonline.fr/content/images/2020/05/LsOnline-TEnantWideExtension-TocConfig.jpg)

SharePoint Tenant Wide Extensions list items

Edit the `Component Properties` of the item like this (for example):

```JSON
{"tocIcon":"AnchorLock","tocShape":"circle","tocHeaders":""}
```

Example of custom configuration

Save the item and go on whatever sites collection and you should see something like this:

![](https://blog.lsonline.fr/content/images/2020/05/Screen-Shot-2020-05-10-at-19.09.25.png)

Custom TOC button

[ ![](https://blog.lsonline.fr/content/images/2021/01/gitlab-white-64.png) Table Of Contents repository ](https://gitlab.lsonline.fr/SharePoint/sp-dev-fx-webparts/toc?ref=blog.lsonline.fr)

---

## Web Part alternatives

If you prefer to use a table of contents as a Web Part, some contributors of PnP have already developed two alternatives:

- A Web Part component that you can put into your page content (into the vertical section for example): [https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-page-sections-navigation](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-page-sections-navigation?ref=blog.lsonline.fr)
- A solution based on two Web Parts that allows sticking some anchors to the top of the page content: [https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-page-sections-navigation](https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-page-sections-navigation?ref=blog.lsonline.fr)
  
  
Hoping this post will help you ?