Skip to content
search icon
clear
Component Status

Navigation table of contents

A table of contents is a list of hyperlinks that scroll to anchored text on the same page.

Guidelines

Table of contents, also known as anchors or article navigation, link to anchored sections on a page. They always link to the current page. Table of contents can be placed either under the main heading and scroll away with the page, or to the right of the page's main content and be sticky.

Labels

  • Avoid labels that are too long.
  • Labels should be to the point and short, no more than three words.
  • If the label does not fit in the space provided, truncation is allowed and should have a tooltip provided.
  • The label should reflect the section heading it links to.

Don't

  • Do not use table of contents to link to other pages.
  • Do not use labels like "Click here" or "Jump to".
FigmaExternal linkFigma design of table of content

Demo

Heading 1

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Topic 1

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Heading 3

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

A very long topic to show overflow ellipsis

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Heading 3

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Topic 3

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Heading 3

Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot. Lorem ipsum dolor sit amet consecteur dit lot.

Edit this page on GitHub