Add a Table of Contents to your modern page for easy navigation

The Table of Contents (ToC) on a web page is used to help readers position directly to the information they are looking for. At a glance, readers can see the headings and topics within the article and easily navigate lengthy pages.   Allowing readers to quickly position to content by selecting the headings is a human centred design approach.

Reference is https://docs.microsoft.com/en-us/sharepoint/introduction

Benefits

Applying a Table of Contents to long, content-rich pages supports the idea that:

• The reader can jump directly to a topic or sub-topic without the need to endlessly scroll.
• The Table of Contents helps navigate long content and build a mental model for the reader.
• A page with a Table of Contents looks more organized and professional.

The ToC in the image above remains statically located on the right-side of the page as you scroll down and up and highlights the heading as you move through the page.  Clicking a heading from this list, positions the reader directly to the heading location within the page.

Our solution

Qualitem has a web part that supports a ToC style list on the right-hand side of the page.   The Table of Contents Web part offers an easy way to manage the headings on a SharePoint modern page with simple styling options available.

Features

Always display

Once added to the right section in your modern page layout, the Table of Contents Web part is automatically set to “Always display” mode, this will look at the headings styles and automatically generate a table of contents list – no manual editing needed.  

Heading levels selector

This feature supports the ToC working to show various levels of the heading styles on your page.   Headings are nested (e.g. Heading 2 under Heading 1 etc.) and indented progressively to easily outline topics and sub-topics.

ToC Styles selector

Various style options are available to choose from.  Qualitem’s ToC web part offers three (3) styles.

• DocFX
• Radio Style
• Background Style

 

‘Back to top’ link

You can add the “Back to top” link to Table of Contents Web part to support positioning the reader quickly to the top of the page.

Custom CSS

You can fully customise the look-n-feel of the Table of Contents Web part by overriding the CSS styles.   The following styles can be configured:

Description	Style Name
The root of the web part	.q-stick-nav-root-override
The sticky container	.q-stick-nav-root-override .q-container-override
The title of the navigation	.q-stick-nav-root-override .q-container-override .q-title-override
The navigation list (ul)	.q-stick-nav-root-override .q-container-override .q-navList-override
The navigation item (li)	.q-stick-nav-root-override .q-container-override .q-navList-override .q-listItem-override
The active item class added to the list item	.q-stick-nav-root-override .q-container-override .q-navList-override .q-listItem-override.q-listItem-active-override
The link in each item	.q-stick-nav-root-override .q-container-override .q-navList-override .q-listItem-override a
The back to top link (a)	.q-stick-nav-root-override .q-container-override .q-back-to-top-link-container-override .q-back-to-top-link-override

Where to get it

All of our web parts are available via our distribution site at spfxhub.com.  

The link to the Table of Contents web part is https://spfxhub.com/packages/qualitem-table-of-contents-web-part.

Extend SharePoint Online with one of our other content-focused web parts in the Qualitem Marketplace, such as:

1. Accordion Heading Web part: Add Accordion heading web parts to your modern page to create an FAQ style page with expand/collapse sections.
2. Source Code Web part: For technical documentation, add our source code web part to document code snippets.

Please note – this article was published directly from Microsoft Word to our WordPress site using Live Publish using a few easy clicks.