Parameter	Type	Description	Default
`page`	Page	Page context	required
`site`	Site	Site context	required
`title`	string	TOC heading title	`"Table of Contents"`
`class`	string	Additional CSS classes	-
`key`	string	Config key for visibility	`"Toc"`
`sticky`	bool	Enable sticky TOC behavior	from config

yaml
params:
  # Basic TOC settings
  showToc: true  # Show/hide table of contents
  
  # Sticky TOC settings
  stickyToc: true              # Enable sticky TOC on scroll
  stickyTocPosition: "right"   # Position: "left" or "right"
  stickyTocMinWidth: 1280      # Minimum viewport width for sticky (px)

# Page-level override
---
title: "My Page"
params:
  stickyToc: false  # Disable sticky for this page
---

# TOC generation settings (in hugo.yaml markup config)
markup:
  tableOfContents:
    startLevel: 2    # Start at h2
    endLevel: 4      # End at h4
    ordered: false   # Use ul, not ol

Sticky TOC Behavior :

The sticky table of contents appears on the side of your content when:

The user scrolls past the main TOC
The viewport is wide enough (default: 1280px minimum)
There’s enough space beside the content area

Features:

Auto-positioning: Calculates available space and positions itself appropriately
Active highlighting: Highlights the current section as you scroll
Smooth scrolling: Click links for smooth scroll to sections
Responsive: Automatically hides on narrow viewports
Configurable: Position (left/right), minimum width

Examples :

go
// Basic usage
{{ partial "widgets/meta/toc.html" (dict "page" . "site" .Site) }}

// With custom title
{{ partial "widgets/meta/toc.html" (dict 
  "page" . 
  "site" .Site 
  "title" "On This Page"
) }}

// Disable sticky for specific page
{{ partial "widgets/meta/toc.html" (dict 
  "page" . 
  "site" .Site 
  "sticky" false
) }}

// With custom class
{{ partial "widgets/meta/toc.html" (dict 
  "page" . 
  "site" .Site 
  "class" "sidebar-toc"
) }}

Styling :

The TOC widget uses these CSS classes:

.toc - Main TOC container
.toc-title - TOC heading
.toc-content - TOC links container
.toc-sticky-container - Fixed container for sticky TOC
.toc-sticky - Sticky TOC element
.toc-sticky-left / .toc-sticky-right - Position variants
.toc-content a.active - Active/current section link

Customize via CSS custom properties:

css
.toc-sticky {
  --spacing-md: 1.5rem;  /* Adjust padding */
  max-width: 320px;      /* Wider sticky TOC */
}

Table of Contents