Table of Contents

Design a table of contents component for a long document, report, or help article. It should let people scan the structure fast and jump to the right section without hunting through the page.

Use clear hierarchy for chapters, sections, and sub-sections. Indent nested items, keep labels short, and show page numbers, anchors, or another clear destination cue on the right. The list should still read cleanly when titles wrap.

Include active, hover, and visited states. The current location should stand out in a way that works in both light and dark themes, and selected items should stay readable against the rest of the list.

If the table gets long, add a collapsed state or section grouping so the component stays compact. Make sure the interaction is obvious: tapping a row should either jump to content or expand nested items, not both at once.

Anchor your design in user experience; create an interactive Table of Contents where hover effects and click responses visually confirm the user's choice.