0
# Table of Contents System
1

2
Types for Slidev's table of contents system, providing hierarchical navigation structure for presentations.
3

4
## Capabilities
5

6
### Table of Contents Item
7

8
Interface for table of contents items with hierarchical structure and navigation state.
9

10
```typescript { .api }
11
/**
12
 * Table of contents item with hierarchical navigation structure
13
 */
14
interface TocItem {
15
  /** Slide number */
16
  no: number;
17
  /** Whether this item is currently active */
18
  active?: boolean;
19
  /** Whether this item is an active parent (has active children) */
20
  activeParent?: boolean;
21
  /** Child TOC items for nested structure */
22
  children: TocItem[];
23
  /** Whether this item has an active parent */
24
  hasActiveParent?: boolean;
25
  /** Nesting level in the hierarchy */
26
  level: number;
27
  /** Title level (heading level: 1-6) */
28
  titleLevel: number;
29
  /** Navigation path for this item */
30
  path: string;
31
  /** Whether to hide this item in TOC display */
32
  hideInToc?: boolean;
33
  /** Display title for this item */
34
  title?: string;
35
}
36
```
37

38
**Usage Examples:**
39

40
```typescript
41
import type { TocItem } from "@slidev/types";
42

43
// Example TOC structure
44
const tocStructure: TocItem[] = [
45
  {
46
    no: 1,
47
    active: true,
48
    activeParent: false,
49
    children: [],
50
    hasActiveParent: false,
51
    level: 0,
52
    titleLevel: 1,
53
    path: "/1",
54
    hideInToc: false,
55
    title: "Introduction"
56
  },
57
  {
58
    no: 2,
59
    active: false,
60
    activeParent: true,
61
    children: [
62
      {
63
        no: 3,
64
        active: false,
65
        activeParent: false,
66
        children: [],
67
        hasActiveParent: true,
68
        level: 1,
69
        titleLevel: 2,
70
        path: "/3",
71
        hideInToc: false,
72
        title: "Getting Started"
73
      }
74
    ],
75
    hasActiveParent: false,
76
    level: 0,
77
    titleLevel: 1,
78
    path: "/2",
79
    hideInToc: false,
80
    title: "Tutorial"
81
  }
82
];
83

84
// Function to find active TOC item
85
function findActiveTocItem(toc: TocItem[]): TocItem | null {
86
  for (const item of toc) {
87
    if (item.active) return item;
88
    
89
    const activeChild = findActiveTocItem(item.children);
90
    if (activeChild) return activeChild;
91
  }
92
  return null;
93
}
94

95
// Function to build TOC navigation path
96
function buildTocPath(item: TocItem): string[] {
97
  const path = [item.title || `Slide ${item.no}`];
98
  
99
  // This would typically traverse up the parent chain
100
  // Implementation depends on how parent references are maintained
101
  
102
  return path.reverse();
103
}
104

105
// Function to filter visible TOC items
106
function filterVisibleTocItems(toc: TocItem[]): TocItem[] {
107
  return toc
108
    .filter(item => !item.hideInToc)
109
    .map(item => ({
110
      ...item,
111
      children: filterVisibleTocItems(item.children)
112
    }));
113
}
114
```