Bookmarks create the outline or table of contents (ToC) on generated PDFs. They have numeric levels that create a hierarchy. That is, a bookmark at level 2 can contain nested bookmarks at level 3. The level of a bookmark is set with the prince-bookmark-level  property, which can be applied to any element via CSS. This is useful if you need to add bookmark-based navigation to different parts of your PDF, such as the chapters of a book or sections of a report. By default, heading elements get the default settings as follows: 

h1 { prince-bookmark-level: 1 }
h2 { prince-bookmark-level: 2 }
h3 { prince-bookmark-level: 3 }
h4 { prince-bookmark-level: 4 }
h5 { prince-bookmark-level: 5 }
h6 { prince-bookmark-level: 6 }

Given the following HTML, you would see the pictured outline/ToC in your PDF viewer of choice:

<!doctype html>
      .chapter { page-break-before: always }
    <div class="chapter">
      <h1>Chapter 1</h1>
      <h2>Chapter 1.1</h2>
      <h3>Chapter 1.1.1</h3>
    <div class="chapter">
      <h1>Chapter 2</h1>

The image above, respectively: Adobe Acrobat Reader,, and

To see more bookmarks in action, check out our ebook example.

Did this answer your question?