When you add a modern page to a site, you can add and customize web parts, which are the building blocks of your page.
If you have a lot of text on your page, and want to organize it for your readers so they don't have to scroll as much to get to the section they want to see, you can use the Table of Contents web part.
With the Table of Contents web part, you can create a dynamic table of contents on your modern page by using heading styles in one or more Text web parts.
Note: Some functionality is introduced gradually to organizations that have opted in to the Targeted Release program. This means that you may not yet see this feature or it may look different than what is described in the help articles.
To display a table of contents, add one or more Text web parts on the page with the content you want. Then, format the text you want to show in the table of contents with Heading 1, Heading 2, or Heading 3 styles. When you click Update in the web part, or Save as draft, Publish, or Post news on the page, you'll see the updated table of contents.
-
Go to the page where you want to add the Table of contents.
-
Ensure that your page has Text web parts on it with the Heading styles you want to use. If not, add one or more Text web parts and style your headings appropriately.
If your page is not already in edit mode, click Edit at the top right of the page.
Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this:
-
Click +, and then search for and select Table of contents from the list of web parts.
-
Click the Edit button .
-
Select or clear the checkboxes for Heading 1, Heading 2, and/or Heading 3 to indicate the heading styles you want to use in the table of contents.
-
Allow or disallow the ability for users to show or hide the Table of contents by sliding the toggle to Yes or No under Allow page viewers to show or hide the table of contents. When you choose Yes, an option to hide or show the Table of Contents is displayed at the top of the table.
Note: When users hide the table of contents, the heading links do not display. However, the title of the Table of Contents web part still displays, along with an option to show the table of contents.
-
To number your headings in an outline style, slide the toggle for Numbered list to Yes. Otherwise, slide the toggle to No.
-
When you're ready, click Update in the web part, or Save as draft, Publish, or Post news on the page.