PageNavigation

An on-this-page table of contents with anchor links and the active section, without a router.

Deploy any branch to a preview URL, then promote it to production when it is ready.

Connect the repository and choose the framework preset; the build command is filled in for you.

Add the variables each environment needs. Production values are never exposed to previews.

Push to the branch. The first build runs automatically and later pushes create new previews.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add page-navigation

What add page-navigation installs alongside the component. The CLI skips any you already have in a compatible version.

1 examples · 1 component

Deploy any branch to a preview URL, then promote it to production when it is ready.

Connect the repository and choose the framework preset; the build command is filled in for you.

Add the variables each environment needs. Production values are never exposed to previews.

Push to the branch. The first build runs automatically and later pushes create new previews.

Scroll the article: the active link follows the section you are reading.

Configured through items: it renders the nav, the links and the active state; other props reach the nav element.

Prop	Type	Default
`items` One entry per section, in page order. id is the element id it links to; level 3 indents a subsection.	`{ id; label; level? }[]`	—
`offset` Pixels from the top at which a section counts as active, usually the height of your page header.	`number`	`96`
`title` Visible heading above the links; pass null to hide it.	`ReactNode`	`"On this page"`
`aria-label` Names the navigation landmark.	`string`	`"On this page"`

The states that apply to this component and their visual treatment.

State	Treatment
Rest	Muted links with a hairline on the start side.
Active	The current section's link in the text color with a solid line.
Hover / focus	Text color on hover; a visible outline on keyboard focus.

A labelled nav landmark with plain anchor links: it works before hydration, without a router, and Back returns to the previous section.

The link of the section being read carries aria-current="location", so screen readers announce it as the current one.

Give each target heading scroll-margin-top equal to your header (scroll-mt-24) so a jump doesn't hide it under the header.

Smooth scrolling is your page's choice; if you add it, turn it off under prefers-reduced-motion.

It tracks the window scroll. For a section inside its own scrolling panel, use the panel's links directly.