Navigate long pages without scrolling
A table of contents gives users direct links to every section on the page, so they can jump to what's relevant without reading from the top.
Table of contents
Tables of contents provide a page overview and direct access to specific sections.
Storybook
components/table-of-contents
components/table-of-contentsUnderstand the page at a glance
Seeing all the headings together helps users assess whether a page is relevant to them before they commit to reading it.
Stays anchored while scrolling
A sticky table of contents keeps navigation within reach as users move through content — especially useful on documentation or policy pages.
1
Container
2
Header
3
Contents list
Default
The table of contents renders a list of named anchor links for jumping to sections on the same page.
Renders anchor links to all sections on the page. Use on long documentation or content pages where users need quick access to specific sections without scrolling.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: padding-none under sgds/table-of-contents means sgds/table-of-contents/padding-none.
sgds/table-of-contents
sgds/padding/nonesgds/gap/mdsgds/gap/xlsgds/font-size/24sgds/font-weight/semiboldsgds/margin/noneWhen to use
- Use this component when users need to compare structured results or move through a long list in a predictable way.
- Use it when the component reduces effort for scanning, comparison, or navigation across related records.
When not to use
- Do not use this component when the content is short enough to show directly without extra controls.
- Do not split simple information into more pages, rows, or controls than users need.
Match the structure to the task
Use structured navigation or comparison only when it helps users move through results with less effort.
Do not add structure for its own sake
Extra pagination or tabular structure slows users down when the content could stay simple.
Built-in accessibility
- Tables of contents provide structured lists of page links.
- Links placed in the contents slot keep their native link behaviour.
Labels and content
- Use section names that match the headings on the page.
- Keep the table of contents updated when sections change.
Focus and interaction
- Users should be able to tab through each contents link in page order.
- Do not include links to sections that are hidden or missing.
TabShift+TabEnterHave suggestions or feedback?
Share them with us on
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.