TableOfContents Component

1
---
2
import { TableOfContents } from '@core/components/TableOfContents';
3
---
4

5
<!-- Auto-detect headings -->
6
<TableOfContents />
7

8
<!-- Custom configuration -->
9
<TableOfContents
10
  title="On This Page"
11
  minLevel={2}
12
  maxLevel={4}
13
  className="sticky top-8"
14
/>

1
interface TableOfContentsProps {
2
  // Display
3
  title?: string;           // Default: "Table of Contents"
4
  className?: string;       // Custom CSS classes
5

6
  // Heading selection
7
  minLevel?: number;        // Minimum heading level (default: 1)
8
  maxLevel?: number;        // Maximum heading level (default: 6)
9
  selector?: string;        // Custom heading selector
10

11
  // Features
12
  smooth?: boolean;         // Smooth scroll behavior (default: true)
13
  offset?: number;          // Scroll offset in pixels (default: 80)
14
  showProgress?: boolean;   // Show reading progress (default: false)
15
}

1
<!-- Documentation page -->
2
<TableOfContents
3
  title="Page Contents"
4
  minLevel={2}
5
  maxLevel={3}
6
  className="hidden lg:block sticky top-8 max-w-xs"
7
  showProgress
8
/>
9

10
<!-- Article with custom styling -->
11
<TableOfContents
12
  title="Article Outline"
13
  smooth={true}
14
  offset={100}
15
  className="bg-light p-3 rounded"
16
/>
17

18
<!-- Mobile-friendly -->
19
<TableOfContents
20
  title="Quick Navigation"
21
  maxLevel={2}
22
  className="block lg:hidden mb-6"
23
/>