Build Contents Navigation

Task

Populate the existing Contents panel from the EPUB’s navigation data.

Load the navigation:

const navigation = await book.loaded.navigation;
const toc = navigation.toc;

Map the TOC into the prepared Contents UI.

When a user selects an item, call EPUB.js:

await renditionRef.current?.display(item.href);

Keep the panel state separate from the book’s current location.

Test

Open the Contents panel.

Confirm:

• chapter titles appear
• selecting a chapter changes the Reader
• the panel can be opened and closed
• the Reader remains usable after navigation

Checkpoint

The Readly Contents panel is backed by the actual EPUB table of contents.