# Table of Content Use `ui-table-of-content` in documentation pages, long settings panels, knowledge content, or any reading surface where users benefit from quick in-page navigation. The real quality of the result depends more on content structure than on visual styling. ## Import ```ts import { TableOfContentComponent } from 'ui'; ``` ## Basic in-page navigation ```ts import { Component } from '@angular/core'; import { TableOfContentComponent } from 'ui'; @Component({ selector: 'app-table-of-content-basic-demo', standalone: true, imports: [TableOfContentComponent], template: `

Overview

Table of content scans headings inside the target container and builds in-page navigation automatically.

Import

Point the component at the content area you want to index.

Usage

Use semantic heading order so nested sections remain understandable.

Structure

Keep heading depth intentional instead of generating long noisy trees.

`, }) export class TableOfContentBasicDemoComponent {} ``` ## Heading level filtering ```ts import { Component } from '@angular/core'; import { TableOfContentComponent } from 'ui'; @Component({ selector: 'app-table-of-content-levels-demo', standalone: true, imports: [TableOfContentComponent], template: `

H2-H3 navigation

H3-H4 navigation

Getting started

Top-level docs section.

Installation

Install and wire the target container.

CLI setup

Project scaffolding details.

Configuration

Heading range and sticky offset live here.

Routing

Deep topic for nested content.

`, }) export class TableOfContentLevelsDemoComponent {} ``` ## Sticky behavior and offset ```ts import { Component } from '@angular/core'; import { TableOfContentComponent } from 'ui'; @Component({ selector: 'app-table-of-content-sticky-demo', standalone: true, imports: [TableOfContentComponent], template: `

Introduction

Sticky mode keeps the current section list visible while the reading panel scrolls.

Layout

Use offset when the page has a fixed app header or secondary sticky shell.

Side panels

TOC often lives beside docs or knowledge content.

Writing guidance

The heading structure should stay cleaner than the TOC configuration itself.

Long-form sections

This container is intentionally taller to make sticky behavior obvious.

Summary

A good TOC reduces scanning cost without overwhelming the page.

`, }) export class TableOfContentStickyDemoComponent {} ``` ## Appearance and indicator style ```ts import { Component } from '@angular/core'; import { TableOfContentComponent } from 'ui'; @Component({ selector: 'app-table-of-content-appearance-demo', standalone: true, imports: [TableOfContentComponent], template: `

Subtle

Outline

Filled

Overview

Appearance changes how strong the side navigation feels against the surrounding shell.

Spacing

Choose the calmer style for long documentation panes.

Accessibility

Indicators should remain visible without overpowering the reading surface.

`, }) export class TableOfContentAppearanceDemoComponent {} ``` ## Custom heading selectors ```ts import { Component } from '@angular/core'; import { TableOfContentComponent } from 'ui'; @Component({ selector: 'app-table-of-content-heading-selector-demo', standalone: true, imports: [TableOfContentComponent], template: `

Hero section

You can build a TOC from custom markers, not only semantic heading tags.

Usage notes

This helps when content is rendered from CMS blocks or custom prose components.

API notes

Use this selectively. Normal semantic headings are still the cleaner default.

`, }) export class TableOfContentHeadingSelectorDemoComponent {} ``` ## Documentation layout composition ```ts import { Component } from '@angular/core'; import { DividerComponent, MessageBarComponent, TableOfContentComponent } from 'ui'; @Component({ selector: 'app-table-of-content-doc-layout-demo', standalone: true, imports: [DividerComponent, MessageBarComponent, TableOfContentComponent], template: `

Overview

TOC works best when the content column is already intentionally structured.

Recommendations

Keep the number of top-level sections manageable and avoid four layers unless the content truly needs it.

Copy style

Headings should be scannable labels, not vague marketing phrases.

Reference

Reference-heavy pages benefit from a stable, always-visible contents rail.

`, }) export class TableOfContentDocLayoutDemoComponent {} ``` ## Accessibility ### Navigation semantics `ui-table-of-content` renders a navigation region and internally maps its entries to tree-node based navigation items. The content area it indexes should still use meaningful heading structure. ### Keyboard behavior Keyboard interaction follows the tree-node based row model used inside the component. | Key | Action | | --- | --- | | Tab / Shift+Tab | Move focus into, through, and out of the table of contents. | | Enter / Space | Activate the focused entry and scroll to the linked section. | | ArrowRight / ArrowLeft | Expand or collapse nested TOC groups when deeper levels are present. | ### Heading structure The TOC can only be as accessible and understandable as the source content. Use clear heading text, avoid skipping levels without reason, and prefer semantic headings over custom selectors when possible.