How to Add Table of Contents

Code

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

using IronPdf;

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

// Configure render options
renderer.RenderingOptions = new ChromePdfRenderOptions
{
    // Enable table of content feature
    TableOfContents = TableOfContentsTypes.WithPageNumbers,
};

PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableOfContent.html");

pdf.SaveAs("tableOfContents.pdf");

Imports IronPdf

' Instantiate Renderer
Private renderer As New ChromePdfRenderer()

' Configure render options
renderer.RenderingOptions = New ChromePdfRenderOptions With {.TableOfContents = TableOfContentsTypes.WithPageNumbers}

Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("tableOfContent.html")

pdf.SaveAs("tableOfContents.pdf")

Output PDF

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

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;
 }

Ready to see what else you can do? Check out our tutorial page here: Convert PDFs