Set --toc-width in your stylesheet to reveal the panel.
:root {
--toc-width: 18rem;
}Description
Overview
book.css is a CSS framework designed to make HTML content resemble a book. It includes features for implementing chapters, sections, and subsections, along with an auto-numbering function.
This page demonstrates the auto-generated Table of Contents:
the Book JavaScript class scans heading elements inside a
container and builds the side panel automatically.
How to use
Three steps: set the CSS variable, add the nav placeholder, call the JS API.
Add a nav.book-toc element with a ul#toc inside.
<nav class="book-toc" aria-label="Table of contents">
<h1>Document title</h1>
<ul id="toc"></ul>
</nav>Instantiate Book with the id of the content container,
then call fill_table().
const book = new Book("main-content");
// optionally adjust which headings are tracked:
book.add_html_tags("h5", "h6"); // include h5, h6
book.delete_html_tags("h4"); // exclude h4
// fill the ToC — numbered headings only (default):
book.fill_table();
// or include all headings:
book.fill_table(false);