Skip to main content

Page nav

PageNav builds an in-page table of contents from the document's headings, highlights the section currently in view, and smooth-scrolls on click. The "On this page" panel of this site is rendered with it.

Example

<PageNav rootSelector="#content" />

Usage

import { PageNav } from 'idea-react';

<PageNav rootSelector="#content" minDepth={2} depth={3} />;

On mount, the component collects h1–h6 elements, assigns missing ids, and renders an anchor per heading indented by level. The link whose section is scrolled into view gains the active class and aria-current="location".

Scope and depth

  • rootSelector limits the scan to one container, such as the main article; by default the whole document is scanned.
  • minDepth and depth bound the included heading levels, e.g. minDepth={2} depth={3} lists only h2 and h3.
  • onItemClick fires with the heading metadata after a link is activated.