An auto-generated table of contents Use the Poper embed snippet in a supported page.

The Poper table of contents widget supports two generation modes. In auto mode the widget scans the page DOM for heading tags and builds the outline at runtime, so the TOC is built from the headings available when the widget initializes. When content changes, validate the published page so the scanned outline still matches the headings Manual mode is the alternative: you list each entry yourself in a built-in editor, which gives you precise control over the exact wording and order. Auto mode is the right default for blog posts and documentation that change often. Manual mode is better for pages where you want the TOC label to differ from the on-page heading text, or for content where the headings are not structured the way you want the outline to read, such as a legal policy.

Auto mode is only as good as the headings it picks up. By default the Poper widget targets every H2 and H3 on the page, which is the right choice for most articles. Two controls refine that. First, you can change the heading selector itself: if your documentation goes deeper you can include H4, or you can narrow the outline to H2 only for a shallow summary. Second, you can give the widget a container selector so it scans a single element (your article wrapper) instead of the whole page, which keeps headings from your site navigation, sidebar, or footer out of the outline. The widget also normalizes the levels it finds, so if your article starts at H2 the outline still reads as a clean top-level list with nested children, rather than indenting everything one level too deep.

Each entry in the table of contents is a jump link to a heading on the page. The Poper widget handles the plumbing automatically: when it scans the page in auto mode, any heading that does not already have an id attribute gets one assigned, so the jump links work even on pages that were never set up with anchors. Existing ids are respected. Clicking an entry scrolls the page to the matching heading. By default that scroll is smooth, which keeps readers oriented as the page moves; you can switch it to an instant jump in the content panel if you prefer. The entry you click highlights as the active section so it is clear where you landed. This is a click-driven model: the active highlight reflects what the reader selected, rather than continuously tracking the scroll position.

The Poper table of contents ships 14 layouts so the same outline fits very different page designs. Clean Line and Numeric Minimal are restrained, typographic treatments that suit editorial articles and documentation. Nested Tree exposes the full heading hierarchy and is the strongest choice for reference docs with many sections. Sticky Bar is a compact horizontal bar of section links. Timeline and Modern Tabs lay the sections out horizontally for chapter-style or multi-section content. Glass Card, Active Pill, Dot Steps, Cyber HUD, Gradient Mask, Brutalist Block, Isometric Blocks, and Notebook Margin are bolder, brand-led styles for sites that want the outline to be a visual feature rather than a quiet utility. Every layout uses the same underlying outline data, so picking one is about visual fit, not a feature trade-off.

A table of contents earns its place on long pages where that a reader cannot see the whole structure at a glance. Blog posts above roughly 1,500 words benefit clearly: the outline lets a reader who arrived from search jump straight to the part that answers their query. Documentation and knowledge-base articles benefit even more, because readers often return to the same long page to find a specific procedure. Legal and privacy policies are a strong fit for manual mode, since the people reading them are usually hunting for one specific clause. The common thread is reader intent: when visitors come to a long page to find something specific rather than read top to bottom, an outline with jump links is the fastest way to get them there.