Feature - Table of Contents

The Table of Contents feature automatically scans the block grid area it is placed in and generates a navigation list from all sibling feature blocks that have a Feature Title set. It requires no configuration — simply add it to an area and it builds the table of contents from the blocks around it.

Unlike the In-Page Navigation feature which uses an editor-driven picker, the Table of Contents is entirely automatic. It discovers its siblings at render time and lists them in the order they appear in the area.

A key design decision is that the Table of Contents only lists feature blocks within the same area where it is placed. In a three-column layout like layout363, a TOC in the middle area will only show blocks from the middle area — it won't include blocks from the left or right sidebars.

This is achieved by the view scanning the block grid layout structure to find which area contains the TOC block, then iterating through the sibling blocks in that same area. This means you could have multiple TOCs on a page, each scoped to its own area.

The Table of Contents renders as a collapsed card bar with a toggler button. When the editor enables sticky in the block settings, the bar sticks to the top of the viewport just below the site navbar as the user scrolls.

Clicking anywhere on the bar expands the list of section links. After selecting a section, the list collapses automatically and the page scrolls to the chosen section. The scroll position accounts for both the navbar height and the collapsed TOC bar height using CSS custom properties.

A subtle shadow appears on the bar when it is in its stuck state, providing a visual distinction from its inline position. This uses the modern CSS @container scroll-state(stuck: top) query where supported, with an IntersectionObserver fallback for browsers that don't support it yet.

The Table of Contents and In-Page Navigation features both link to sections within a page, but they take opposite approaches.

The Table of Contents is automatic: it scans its own area for all titled feature blocks and lists them in order. There is no picker, no configuration, and no way to exclude individual blocks. If a block has a Feature Title, it appears. This makes it ideal for pages where you want a complete overview with zero editorial effort.

The In-Page Navigation is editor-driven: the content editor uses a Contentment picker to choose exactly which blocks appear and in what order. Crucially, the picker can select blocks from any area on the page — not just the area the navigation sits in. This means the right sidebar navigation can link to blocks in the middle column, left column, or any other area.

The Table of Contents is area-scoped: it only sees blocks within its own area. It is designed for the main content area as a sticky collapsed bar that expands on click. The In-Page Navigation is designed for the right sidebar as a persistent sticky card on desktop with an offcanvas bottom bar on mobile.

The Table of Contents is designed for the main content area — the middle column in a multi-column layout, or the full width in a single-column layout. It sits at the top of the content, giving readers an overview of what follows before they start scrolling.

Because it auto-generates from blocks in its own area, placing it in a sidebar would only list the sidebar content, which is rarely useful. For sidebar navigation, use the In-Page Navigation or Nested Descendants features instead.

The feature works with any layout that accepts feature blocks. Simply add it as the first block in an area and it will list all the titled siblings that follow it.