Using the PnP Page Navigator Web Part as Table of Contents Replacement

With release v1.26.1 WikiTraccs introduced macro transformation templates that allow converting macros to SharePoint web parts.

Let’s try converting the Table of Contents macro to the PnP Page Navigator web part, which provides similar functionality.

What is PnP Page Navigator?

The PnP Page Navigator web part shows the headings of the SharePoint page it’s placed on. Clicking the heading entry will jump to the heading.

The Page Navigator is a SPFx solution that is developed by the PnP community, a group of people that creates open source solutions for the Microsoft 365 ecosystem.

The web part is available in the sp-dev-fx-webparts repository on GitHub: Page Navigator.

It seems to be distributed as source code, so normally you’d have to set up a development environment and build it for yourself. I did this for the current version 1.10 (released on March 15, 2025).

You can download the SPFx solution package for version 1.10 of the Page Navigator here: react-page-navigator.sppkg.

Note that I take no responsibility what’s in the solution. I merely followed the instructions on the solution’s README and built it from source code.

Creating a Macro Transformation Template

To tell WikiTraccs to transform the Table of Contents macro to the Page Navigator web part we need to create a macro transformation template.

It looks like this:

<script id="data-sp-webpartdata" type="application/json">
{
"id": "bcac4d9d-adf5-4462-97c5-e5f3e97dd518",
"instanceId": "{{{RandomGuid1}}}",
"title": "Page Navigator",
"description": "Page Navigator builds a navigation structure on the page, based on the headers in your text.",
"audiences": [],
"serverProcessedContent": {
    "htmlStrings": {},
    "searchablePlainTexts": {},
    "imageSources": {},
    "links": {}
},
"dataVersion": "1.0",
"properties": {
    "stickyMode": false,
    "stickyParentDistance": "1"
},
"containsDynamicDataSource": false
}
</script>

<div data-wikitraccs-webpart-template="true" data-sp-controldata="data-sp-controldata" data-sp-webpartdata="data-sp-webpartdata">🚧 Moved Page Navigator web part as it cannot be embedded here</div>

Note: At the time of writing this above template is not yet available in the WikiTraccs templates folder, but it will be in one of the next WikiTraccs releases.

Testing the Transformation from Macro to Web Part

Here’s our Confluence test page:

Note that table of contents macro at the start of the page.

Here’s the modern SharePoint Online page that WikiTraccs creates:

Note that the Table of Contents macro has successfully been transformed to the Page Navigator web part.

Closing Notes

While testing I stumbled over some effects that look like bugs in the Page Navigator web part:

• React-Page-Navigator - List View Threshold Error in Sites with More than 5000 Pages
• React-Page-Navigator - Empty Page Navigator If Page File Name has a + (Plus Sign) in It

I find it also important to note that the Page Navigator web part loads the whole page content again, to scan for headings. This might be a strain on mobile connections and something to consider when targeting environments where the amount of transferred data matters.

• ←Previous
Next→