Add automatic heading navigation to a site page
Pages and record templates on Hub sites can display an automatic table of contents that links to the headings in the page. The contents list follows rendered article content, including headings inside linked records and reusable blocks. ## Enable a table of contents 1. Open **Sites** in your workspace. 2. Select the site and open the page you want to edit. 3. Select **Edit sections** to open the editor drawer. 4. In the editor drawer, find the **Table of contents** disclosure. 5. Check **Show table of contents** to enable it. 6. Choose a style, placement and heading depth (see options below). 7. Save the page and publish the site to make the change visible to visitors. The table of contents does not appear until the page contains at least one visible heading at the chosen depth. ## Style options | Style | How it looks | |---|---| | **Outline** | A plain linked list of headings. | | **Numbered** | Headings numbered hierarchically — for example, 1, 1.1, 1.1.1, 2. | | **Reading guide** | Headings with a left accent bar and a reading-progress indicator below the list. | ## Placement options | Placement | Behaviour | |---|---| | **Right sidebar** | Contents appear in a sidebar to the right of the page body. | | **Left sidebar** | Contents appear in a sidebar to the left of the page body. | | **Above content** | Contents appear as an inline block above the page body. | On screens narrower than 900 px, all sidebar placements collapse to a collapsible list above the content, matching the inline placement. ## Heading depth Choose which headings appear in the contents list: - **Main headings (H1–H2)** — includes only top-level and second-level headings. - **Include subheadings (H1–H3)** — includes top-level, second-level and third-level headings. ## Keep visible while scrolling Enable **Keep visible while scrolling** to pin the sidebar or inline contents so it stays in view as the visitor scrolls down the page. - When sticky is on, the contents list has a bounded maximum height and scrolls independently if the list is longer than the visible area. - When sticky is off, the contents scrolls away with the rest of the page. - Heading jump targets account for the sticky bar's visible height so headings are not hidden behind it. - On mobile, sticky behaviour follows the collapsed above-content layout. ## How headings are tracked The contents component scans the rendered page for visible headings: - Headings inside hidden elements, dialog overlays and text editor areas are excluded. - The current section is highlighted as the visitor scrolls — the heading closest to the top of the viewport is marked as active. - Deep-link fragments in the URL (for example, `#section-name`) scroll to the matching heading when the page loads, even when heading content arrives asynchronously. - Repeated headings and non-Latin headings (including CJK characters) produce unique, stable anchor IDs. ## Record templates When a table of contents is enabled on a record template (for example, an article detail page), each article generates its own separate contents list based on that article's headings. The contents is not shared across articles. ## Preserved settings The table of contents setting is preserved when you: - Duplicate the page. - Restore a published version that included the setting. - Publish a new version. The setting is stored per-page and included in version snapshots.