SGDS Table of Contents Component Skill

<sgds-table-of-contents> renders a list of anchor links for in-page navigation. Provide a heading via the default slot and a list of <li> items containing <sgds-link> elements via the contents slot.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Standard table of contents for a content page? → Use <sgds-table-of-contents> with a heading in the default slot and <li> items in the contents slot

Each entry links to a page section? → Use <sgds-link> with <a href="#section-id"> inside each <li>