---
title: Table of contents and anchor navigation | Module Library
---

[Skip to content](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#main-content)

![Membership Demo](https://testportal.streamcreative.com/hs-fs/hubfs/Membership-Demo.png?width=470&height=59&name=Membership-Demo.png)Homepage

- [Default HubSpot Blog](https://streamcreative-2659819.hs-sites.com/blog?hsLang=en)

Get started

- [Default HubSpot Blog](https://streamcreative-2659819.hs-sites.com/blog?hsLang=en)

Get started

[Overview](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-overview)[Features](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-features)[Details](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-details)[Summary](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-summary)

[Overview](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-overview)|[Features](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-features)|[Details](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-details)|[Summary](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-summary)

## Overview

This section is indexed by the Table of Contents above. Scroll through the page to see active-link highlighting and (in sticky sidebar mode) the progress bar.

## Features

Second section. The TOC link for this heading should become active (accent color + left-border indicator) as this section scrolls into the viewport threshold.

### Sub-feature A

Nested h3 — appears at the indented level in the TOC when maxDepth is 3 or higher.

## Details

Third section. Both the TOC link and the AnchorNavigation link for Details should highlight when this section is in view.

## Summary

Fourth section. Clicking the Summary link in the AnchorNavigation or TOC should smooth-scroll here.

## 3. TOC on Dark Section — colors follow dark palette

### Dark Section Contents

- [Dark item one](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-overview)
- [Dark item two](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-features)
- [Dark item three](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-details)

## 4. AnchorNavigation — Pills + Custom Active State

[Overview](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-overview)[Features](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-features)[Details](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-details)[Summary](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-summary)

The active pill above should show a dark-red (#B30000) background with white text. Inactive pills should show no background. Hover shows the default hover bg.

## 5. TOC — shared entrance animation (slide-up, theme defaults)

### Animated Contents

- [Reveals as one block](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-overview)
- [Shared reveal system](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-features)
- [Theme speed and easing](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-details)

### 6. Sticky Sidebar TOC

- [Overview](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-overview)
- [Features](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-features)
- [Details](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-details)
- [Summary](https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation#qa-summary)

Sticky-sidebar TOC sits in the left column; this content fills the right. The TOC card should render normally (bordered, with a progress bar at the top). On a tall page it stays pinned while this column scrolls.

---

#### Solutions

- [Services](https://testportal.streamcreative.com/services?hsLang=en)
- [Industries](https://testportal.streamcreative.com/industries?hsLang=en)

#### Company

- [About](https://testportal.streamcreative.com/about?hsLang=en)
- [Careers](https://testportal.streamcreative.com/careers?hsLang=en)

#### Resources

- [Blog](https://testportal.streamcreative.com/blog?hsLang=en)
- [Contact](https://testportal.streamcreative.com/contact?hsLang=en)

© 2026 Your Company. All rights reserved.

```json
{
  "@context" : "https://schema.org",
  "@type" : "Organization",
  "address" : {
    "@type" : "PostalAddress",
    "addressLocality" : "Brookfield",
    "addressRegion" : "WI",
    "postalCode" : "53005",
    "streetAddress" : "13555 Bishops Ct"
  },
  "logo" : {
    "@type" : "ImageObject",
    "url" : "https://f.hubspotusercontent10.net/hubfs/2659819/Membership-Demo.png"
  },
  "name" : "streamcreative.com",
  "url" : "https://testportal.streamcreative.com"
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "WebPage",
  "name" : "Module Library: Table of contents and anchor navigation",
  "url" : "https://testportal.streamcreative.com/module-library/table-of-contents-and-anchor-navigation"
}
```