vocab.design

pattern · navigation

Table of contents

also called contents, in-page navigation (community)

A list of a document's sections, linked in reading order, shown beside or above the text.

A table of contents is the list. Scroll spy is the behaviour that highlights which entry you are currently under, and the two get talked about as one thing because they so often ship together, but a contents list with no tracking at all is still a table of contents: it enumerates the document, it links each entry to the section it names, and it does that whether or not anything ever lights up. The list is the noun and the highlight is the verb, which is why a specimen of this term can be demonstrated with a click and nothing else.

Reading order is not a detail. A list of the same links sorted alphabetically, or by popularity, or by how recently each section changed, is an index rather than a contents list, and it answers a different question: an index is for a reader who already knows the word they want, a contents list is for one who wants the shape of the whole. That shape is also why depth stops helping fast. Two levels give a reader the sections and their parts; a third turns the aid into a second document to read before the first one, and the usual fix is to publish the top two and let the page’s own headings carry the rest.

The honest way to build one is to generate it from the headings. A hand-maintained list drifts the moment a section is renamed or moved, and it drifts silently, since nothing about a stale entry looks broken until someone clicks it. Deriving the list from the document’s heading hierarchy makes the two impossible to disagree, and it turns a flat heading structure into a visible bug rather than a private one. Marking the list up as a nav with aria-label (or the publishing world’s doc-toc role) is what tells a screen reader that this block is a navigational aid and not the first paragraph.

On a long page the contents list usually wants to stay reachable, which is where it becomes a sticky sidebar in a side rail rather than a block above the text. Do not confuse it with local navigation, which lists other pages: a table of contents never leaves the document it describes, and when a single page is the whole section, the two collapse into each other and the rail’s entries stop being URLs.

Which word?

If you wantsay
the document's own sections, in reading ordertable of contents
navigation that highlights the section you are readingscroll spy
nav that changes with the section you are inlocal navigation

Related

See also: Sticky sidebar · Heading hierarchy

Sources