AnchorNav

Overview

The AnchorNav component provides a way to navigate through various sections of a page by anchoring to specific parts of the content. It updates the URL hash as the user scrolls and highlights the currently active section.

Use this component on long-form pages or documentation where it’s helpful to quickly jump between sections.

Implementation

Edit the code below to see your changes live!

Props

Prop name
Type
Default
Description
elements *AnchorNavElement[]

An array of section definitions to render as anchors and scrollable content.

Props ending with * are required

Do's and Don'ts

Do
Use on long pages to improve navigation between sections.
Label sections clearly and use descriptive IDs.
Keep section content well-spaced to improve visibility of the active section.
Don't
Don't use AnchorNav on pages that are too short to require section navigation.
Avoid having too many sections which can clutter the navigation.