Skip to main content
CodivDocs

Reading Experience

Breadcrumb, Table of Contents, and prev/next navigation come wired in for every docs page.

What readers get automatically

Every rendered page ships with four reading-experience primitives that the platform wires in from your MDX source and codiv.config.json — you don't configure them per page.

Breadcrumb / section eyebrow

The parent group (or tab + group, in tabbed mode) renders as a muted link above the h1.

On this page

Every h2 and h3 in your MDX body appears in a sticky right-column TOC with scroll-spy highlighting.

Prev / next cards

Paired navigation cards at the end of each page use the flattened navigation order.

Last updated

A subtle timestamp under the footer shows when the page was last synced from your GitHub repo.

Breadcrumb

The breadcrumb reads from the navigation field in your codiv.config.json. The platform walks all groups to find which one contains the current page, then renders:

  • Single item (flat mode or tabbed mode with one-level nesting): a primary-colored "eyebrow" label above the h1, like Documentation

  • Multiple items (nested groups or explicit tab + group): a classic chevron-separated trail, like Documentation › Getting Started

No extra config. If the page is in the Getting Started group under the Documentation tab, the breadcrumb renders itself.

Table of Contents

The right-column "On this page" list is generated by parsing your MDX source and extracting every h2 and h3 heading. Clicking a heading scrolls to it; the active heading highlights automatically as the reader scrolls using IntersectionObserver.

h1 is reserved for the page title (from frontmatter). The TOC never includes it. h4 and deeper headings are also skipped to keep the list scannable.

Heading IDs are auto-generated from the text:

## API Reference → #api-reference
## Create a project → #create-a-project

You can override the slug with {#custom-id} syntax if you need stable anchors:

## Create a project {#new-project}

Prev / next navigation

Below the last paragraph of every page, readers see two cards linking to the previous and next pages in the flattened navigation sequence.

In tabbed mode, prev/next stay within the current tab. The Next button on the last Documentation page does not jump to the first Components page — each tab is a self-contained reading sequence.

Last updated

The timestamp is read from the pages.updated_at column, which is set every time the Trigger.dev sync job writes the page. In practice, this is the timestamp of the most recent git push that touched the file.

Writing for the reading experience

The primitives above just work, but a few authoring habits make them work better:

  1. Lead with an h2. The first paragraph of your body is not an h1 — that is the title in frontmatter. The body should start with a section heading so the TOC has entries from the first scroll.

  2. Keep h2 and h3 scannable. Think of them as the table of contents entries, because they are.

  3. Name your navigation groups like human sections. "Getting Started" works; "gs-v2-final" does not — the group name becomes the breadcrumb.

  4. Order your nav entries thoughtfully. Prev/next walks the list in order, so bad ordering becomes bad reading flow.

Last updated April 12, 2026