Navigate long pages
Use a table of contents to link directly to sections on the same page.
Tables of contents provide a page overview and direct access to specific sections.
Use a table of contents to link directly to sections on the same page.
A list of headings helps users understand what the page contains.
Use it on long documentation, guidance, or policy pages.
Header
Link(s)
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-padding-none—sgds-gap-md16pxsgds-margin-none—sgds-font-size-subtitle-md—sgds-font-weight-semibold—sgds-line-height-xsHeight variesDocumentation, policy pages, and long-form articles benefit most. Each link should map to a heading.
If the page fits on one or two screens, a table of contents adds little value and competes with the body.
Use a short heading like On this page or Contents so users immediately recognise the navigation block.
Table of contents links should stay within the current page. Use mainnav or sidenav when users need to move across pages.
Each link should match a real heading in the same order. Out-of-sync entries break trust and create dead links.
Each anchor must match one unique section id on the page. Broken or repeated ids can send users to the wrong place.
Use one direct contents item for each major section. Split dense pages into clearer major sections instead of nesting links.
Nested lists are not part of the SGDS table of contents structure and may not receive the component's spacing or list treatment.
TabShift+TabEnterShare them with us on Slack → #ask-sgds-v3
Report it on GitHub Issues → sgds/components/table-of-contents
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.