WikiPakk Table of Contents Web Part for SharePoint Pages (Video)
SharePoint pages can get long, and SharePoint has no built-in table of contents. The Table of Contents web part provided by WikiPakk fills that gap: it collects the headings of a page and shows them as a clickable list, so readers can jump straight to the part they need.
This video shows the web part end to end: a demo page with text web parts, a Markdown web part, a two-column layout, a collapsible section, and a flexible section; adding the Table of Contents web part; and a tour through all its settings, ending with a sticky table of contents in a vertical section.
Prefer to read, or want to jump to a specific part? Each section below links to the matching moment in the video.
AI Note
The step-by-step instructions were automatically generated from the video transcript.Four heading levels in a text web part
The demo page is prepared with several headings. In edit mode, the first section has one column with a text web part that uses heading levels one to four. Four levels is the maximum the SharePoint text web part provides.
▶️ Watch from the start · start 0:00 · duration 0:45
Two-column layout and a collapsible section
The next section has a two column layout: a heading level one on the left, and three heading level two headings on the right. This is a common layout, with the main information on the left and details on the right, and it matters for the table of contents later. After that comes a collapsible section, collapsed by default, with a text web part and two child headings inside.
▶️ Watch this part · start 0:45 · duration 0:46
A flexible section with a Markdown web part
The last section is a flexible section, a fairly new SharePoint addition where web parts sit on a grid and can be moved around freely. It holds a Markdown web part, where headings are written in Markdown; in the demo it uses five heading levels, more than the text web part offers. Two more text web parts float next to it.
▶️ Watch this part · start 1:31 · duration 1:02
Adding the Table of Contents web part
Adding the web part is quick: click the plus sign to add a web part and look for the WikiPakk icons, which include Children Display, Page Tree Editor, and Table of Contents. Click Table of Contents, and the web part is added. Republish the page to see the result.
▶️ Watch this part · start 2:33 · duration 0:31
Jumping to headings and per-web-part nesting
The table of contents lists heading one to four from the first text web part. Clicking an entry jumps to that heading, the same as clicking the link symbol next to a heading; SharePoint adds a fragment to the address bar that tells the page where to jump. The two-column headings show up at the same level, because nesting is counted per web part by default. The collapsible section is included too: its section heading and the child headings inside are all clickable.
▶️ Watch this part · start 3:04 · duration 1:16
Markdown headings, lazy loading, and caching
The Markdown web part is a little special. SharePoint lazy loads web parts, so the Markdown headings sometimes only appear after a page reload. The Table of Contents web part caches the result, so the next time the page opens, no reload is needed. After the reload, the Markdown headings and the headings from the flexible section all show up and can be jumped to.
▶️ Watch this part · start 4:20 · duration 0:48
Settings: display depth and indent across columns
To configure the web part, edit the page, select the Table of Contents web part, and choose Edit properties; a settings panel slides out. The first option is the depth, which limits how many heading levels are shown. Next is Indent across columns: it connects the columns of a section visually, so the heading level two entries from the right column indent under the heading level one from the left column, matching the visual hierarchy of the layout.
▶️ Watch this part · start 5:08 · duration 1:18
Show a title and hide headings
By default the web part shows the title On this page; you can toggle the title off or set your own. Then there are options to hide content. Hide headings above the table of contents removes all headings that sit above the web part on the page, handy when the table of contents sits further down and should only cover what follows. Hide headings in the first section does nothing on this demo page, because its first section only holds the title web part, but it comes in handy with certain page templates that Microsoft uses.
▶️ Watch this part · start 6:26 · duration 1:44
Bullet style and font size
The bullet style setting offers a circle, a square, or a mixed symbol that changes with the level. The font size can be made smaller or larger, or left at inherit.
▶️ Watch this part · start 8:10 · duration 0:35
Keep visible while scrolling: a sticky table of contents
Normally the table of contents scrolls away with the page. The Keep visible while scrolling setting pins it, so it sticks at the top of its section. This works best with a vertical section: add a vertical section, place a Table of Contents web part there, and enable the setting. Now a sticky table of contents sits on the right side of the page, always available to jump around, which is pretty handy.
▶️ Watch this part · start 8:45 · duration 1:18