A table of contents gives readers a map of a longer article. Open the contents or choose a bar to jump to a section. Scroll this article to follow your position in the rail.

Keep navigation beside the content it describes. Each of the four bars and its matching link points to a real section in this preview, so you can explore without leaving the card.

Give each section a unique ID and use that same ID for its link and indicator. Scope scroll tracking to the article’s container when the content sits inside another page.

Use CSS to adjust the rail, spacing and panel. The active bar follows the current section. Native heading links continue to work when JavaScript is unavailable.

A table of contents gives readers a map of a longer article. Open the contents or choose a bar to jump to a section. Scroll this article to follow your position in the rail.

Keep navigation beside the content it describes. Each of the four bars and its matching link points to a real section in this preview, so you can explore without leaving the card.

Give each section a unique ID and use that same ID for its link and indicator. Scope scroll tracking to the article’s container when the content sits inside another page.

Use CSS to adjust the rail, spacing and panel. The active bar follows the current section. Native heading links continue to work when JavaScript is unavailable.