Examples

Examples

Live Example

This documentation page itself uses a live Table of Contents instance. Look for the “CONTENTS” button in the sidebar — it is a real ion-tableofcontents rendering configured with StickyTop enabled. Click the button to expand the dropdown and see how it lists the titled Grid sections on this page (Examples, Usage Notes, Control Properties). As you scroll, the active section is highlighted via scroll-spy.

Default Configuration

The default configuration places the TOC in the sidebar subgrid with StickyTop=1 so it remains visible while the user scrolls. No ScopeToHeading or ScopeToSelector values are set, so it discovers all headings on the page.

Scoped to Specific Headings

To limit the TOC to only h2 and h3 elements, set the ScopeToHeading checklist to include those levels. Combined with ScopeToSelector set to a container CSS selector (e.g. .content-area), the TOC will only index headings within that container, ignoring sidebar or header headings.

Non-Sticky Configuration

When StickyTop is unchecked, the TOC scrolls with the page content. This is useful when the TOC is placed inside a grid section rather than a fixed sidebar, or when the page is short enough that sticky behaviour is unnecessary.

Notes

• The TOC is built client-side using the bootstrap-toc library. It loads jQuery 3.7.1, the bootstrap-toc CSS, and bootstrap-toc JS into the page via the HeadTop and BodyBottom sections.
• The TOC discovers headings on the page after DOM ready. It uses Toc.init() to build the navigation and $("body").scrollspy() to highlight the currently visible section.
• When ScopeToSelector is set (e.g. #main-content), the TOC only indexes headings inside that element. When ScopeToHeading is also set, both are combined so the TOC indexes only the selected heading levels inside the selected container.
• Grid sections with HideFromTOC enabled will not generate headings that the TOC can discover. Use this to exclude utility sections like sidebars or footers.
• The TOCTitle parameter on a Grid rendering allows you to override the heading text that appears in the TOC. If not set, the TOC uses the visible heading text.
• The TOC renders as a Bootstrap dropdown with data-bs-auto-close="false" so it stays open once the user expands it (the keep-open class).
• In Experience Editor the TOC does not initialise (guarded by :not(.scEnabledChrome)) to avoid interfering with the editing experience.
• Only one TOC instance should be placed per page. If multiple exist, only the first #toc element will be initialised by the library.