1. IronPDF
2. How-Tos
3. Add Table of Contents

How to Add Table of Contents

ByChaknith Bin

May 31, 2025

Updated  June 22, 2025

Share:

A table of contents (TOC) is like a roadmap that helps readers navigate through the PDF document's contents. It typically appears at the beginning and lists the main sections or chapters of the PDF, along with the page numbers where each section begins. This allows readers to quickly find and jump to specific parts of the document, making it easier to access the information they need.

IronPDF provides a feature to create a table of contents with hyperlinks to the 'h1', 'h2', 'h3', 'h4', 'h5', and 'h6' elements. The default styling of this table of contents will not conflict with other styles in the HTML content.

Get started with IronPDF

Start using IronPDF in your project today with a free trial.

First Step:

Start for Free

Add Table of Contents Example

Use the TableOfContents property to enable the creation of a table of contents in the output PDF document. This property can be assigned to one of three TableOfContentsTypes, which are described as follows:

• None: Do not create a table of contents
• Basic: Create a table of contents without page numbers
• WithPageNumbers: Create a table of contents WITH page numbers

To understand this feature better, you can download the sample HTML file below:

• Download the sample HTML file

Code

:path=/static-assets/pdf/content-code-examples/how-to/table-of-contents.cs

using IronPdf;
using System.IO;

// Instantiate a new ChromePdfRenderer
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure rendering options
renderer.RenderingOptions = new ChromePdfRenderOptions
{
    // Start page numbering from 1
    FirstPageNumber = 1,
    
    // Create outline maps (table of contents) with page numbers
    CreateOutlineMaps = true,
    OutlineMapsFormat = TableOfContentsTypes.WithPageNumbers
};

// Render an HTML file as a PDF document
// Ensure the local file path and name are correct
try
{
    PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableOfContent.html");
    
    // Save the rendered PDF to a file
    // Specify the path where the file should be saved
    pdf.SaveAs("tableOfContents.pdf");
}
catch (FileNotFoundException ex)
{
    // Handle cases where the HTML file is not found
    System.Console.WriteLine("File not found: " + ex.Message);
}
catch (Exception ex)
{
    // Handle other exceptions
    System.Console.WriteLine("An error occurred: " + ex.Message);
}

Imports IronPdf
Imports System.IO

' Instantiate a new ChromePdfRenderer
Private renderer As New ChromePdfRenderer()

' Configure rendering options
renderer.RenderingOptions = New ChromePdfRenderOptions With {
	.FirstPageNumber = 1,
	.CreateOutlineMaps = True,
	.OutlineMapsFormat = TableOfContentsTypes.WithPageNumbers
}

' Render an HTML file as a PDF document
' Ensure the local file path and name are correct
Try
	Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableOfContent.html")

	' Save the rendered PDF to a file
	' Specify the path where the file should be saved
	pdf.SaveAs("tableOfContents.pdf")
Catch ex As FileNotFoundException
	' Handle cases where the HTML file is not found
	System.Console.WriteLine("File not found: " & ex.Message)
Catch ex As Exception
	' Handle other exceptions
	System.Console.WriteLine("An error occurred: " & ex.Message)
End Try

Output PDF

The table of contents will be created with hyperlinks to each of the 'h1', 'h2', 'h3', 'h4', 'h5', and 'h6'.

Table of Contents Placement on the PDF

1. Ensure that the HTML document has proper header tags (h1 up to h6).
2. Optionally insert a div for where you want the Table of Contents to appear. If the below div is not provided, IronPDF will insert the Table of Contents at the start.

<div id="ironpdf-toc"></div>

<div id="ironpdf-toc"></div>

3. In the render options, choose to render the table of contents either with or without page numbers.

Styling the Table of Contents

The Table of Contents can be styled using CSS by targeting the various CSS selectors that define the style of the Table of Contents.

In addition, styling modifications can be done using the CustomCssUrl property. Let's begin by downloading a CSS file that contains the original styling for the table of contents below.

• Download the custom CSS file

:path=/static-assets/pdf/content-code-examples/how-to/table-of-contents-overwrite-styling.cs

// Import necessary namespaces
using IronPdf;
using System.IO;

// Instantiate Renderer for converting HTML to PDF
// It needs to be inside a method to ensure proper execution when called
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure render options for the PDF
renderer.RenderingOptions = new ChromePdfRenderOptions
{
    // Enable Table of Contents feature with page numbers
    // Correct property path for TableOfContentsType
    EnableTableOfContents = true,
    
    // Use a custom CSS file for styling
    // Ensure the path exists and is correctly referenced
    CustomCssUrl = Path.Combine(Directory.GetCurrentDirectory(), "custom.css")
};

// Read HTML content from a file
// Confirm that the file path is correct
string html = File.ReadAllText("tableOfContent.html");

// Render the HTML as a PDF document
PdfDocument pdf = renderer.RenderHtmlAsPdf(html);

// Save the PDF document to a file
// Confirm that you have write permissions in the directory
pdf.SaveAs(Path.Combine(Directory.GetCurrentDirectory(), "tableOfContents.pdf"));

' Import necessary namespaces
Imports IronPdf
Imports System.IO

' Instantiate Renderer for converting HTML to PDF
' It needs to be inside a method to ensure proper execution when called
Private renderer As New ChromePdfRenderer()

' Configure render options for the PDF
renderer.RenderingOptions = New ChromePdfRenderOptions With {
	.EnableTableOfContents = True,
	.CustomCssUrl = Path.Combine(Directory.GetCurrentDirectory(), "custom.css")
}

' Read HTML content from a file
' Confirm that the file path is correct
Dim html As String = File.ReadAllText("tableOfContent.html")

' Render the HTML as a PDF document
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf(html)

' Save the PDF document to a file
' Confirm that you have write permissions in the directory
pdf.SaveAs(Path.Combine(Directory.GetCurrentDirectory(), "tableOfContents.pdf"))

Style Headers

Use the '#ironpdf-toc ul li.h1' selector to apply different styling to the H1 header in the table of contents. Replace 'h1' with 'h2' up to 'h6' to change the styling for each respective header.

#ironpdf-toc ul li.h1 {
    font-style: italic;
    font-weight: bold;
}

Font Family

With both the '#ironpdf-toc li .title' and '#ironpdf-toc li .page' selectors, it is possible to overwrite the font family of the table of contents. To do this, we can use the cursive font for the title and utilize the @font-face attribute to use the custom 'Lemon' font designed by Eduardo Tunni.

• Download the Lemon font

#ironpdf-toc li .title {
    order: 1;
    font-family: cursive;
}

@font-face {
    font-family: 'lemon';
    src: url('Lemon-Regular.ttf')
}

#ironpdf-toc li .page {
    order: 3;
    font-family: 'lemon', sans-serif;
}

Indentation

Indentation can be controlled using the ':root' selector. This value determines the amount of indent for each header level (h1, h2, ...) in the table of contents. It can be increased as needed, or there can be no indentation with a value of 0.

:root {
    --indent-length: 25px;
}

Dot Line

To remove the dotted lines between the header title and page number, modify the background-image of the ::after selector. In the original styling, the second parameter is "currentcolor 1px". Change it to "transparent 1px" to remove the dots. It is important to specify other attributes as well because, in this selector, the new styling will completely override the old styling rather than just adding to it.

#ironpdf-toc li::after {
    background-image: radial-gradient(circle, transparent 1px, transparent 1.5px);
    background-position: bottom;
    background-size: 1ex 4.5px;
    background-repeat: space no-repeat;
    content: "";
    flex-grow: 1;
    height: 1em;
    order: 2;
}

Chaknith Bin

  Chat with engineering team now

Software Engineer

Chaknith is the Sherlock Holmes of developers. It first occurred to him he might have a future in software engineering, when he was doing code challenges for fun. His focus is on IronXL and IronBarcode, but he takes pride in helping customers with every product. Chaknith leverages his knowledge from talking directly with customers, to help further improve the products themselves. His anecdotal feedback goes beyond Jira tickets and supports product development, documentation and marketing, to improve customer’s overall experience.When he isn’t in the office, he can be found learning about machine learning, coding and hiking.

Ready to Get Started?

Free NuGet Download Total downloads: 14,143,061

View Licenses