navigation
Section-Aware Navigation
A local section index whose active indicator follows the content currently entering the reading window.
- navigation
- section
- scroll
- reading
Live preview
Quick usage
import { SectionAwareNavigation } from "@pinky-ui/experiences";
<SectionAwareNavigation sections={sections} />Presets
Default
The restrained Pinky production default.
Default behaviour
Quiet
A flatter or lower-intensity treatment for dense pages.
disabled={true}
Install
Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/experiencespnpm add @pinky-ui/experiencesyarn add @pinky-ui/experiencesnpx pinky-ui add section-aware-navigationPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| sections | NavigationLink[] | — | Anchors whose ids correspond to readable page sections. |
| className | string | — | Styles the outer composition without changing its behaviour. |
| disabled | boolean | false | Uses the static, readable composition. |
Accessibility
- Each item is a native anchor with aria-current=location for the visible section.
- The indicator is supplemental; labels and anchor targets remain usable without scripting.
Performance
- IntersectionObserver replaces scroll polling.
- The observer watches only the supplied section elements and disconnects on unmount.
Reduced motion
The indicator changes position immediately while section state and anchor behavior remain intact.
When to use
- Long editorial, documentation or case-study pages
When not to use
- Short pages or interfaces where a persistent local index adds noise
Skill
Purpose
SectionAwareNavigation is a local reading index whose active destination follows the section currently entering the viewport. It ties navigation state to content position without polling scroll on every frame.
Interaction anatomy
- Anchors: each item points to a real section id.
- Observer: the active section is chosen from the reading window.
- Indicator: one supplemental rule follows the current anchor.
- Fallback: anchors still work if observation is unavailable.
Live example
Scroll the preview through its sections or activate an anchor directly. The active label follows the content and can also be reached by keyboard.
Usage
import { SectionAwareNavigation } from "@pinky-ui/experiences";
<SectionAwareNavigation
sections={[
{ id: "intro", label: "Intro", href: "#intro" },
{ id: "materials", label: "Materials", href: "#materials" },
]}
/>;Tune
- Match every navigation id to a unique meaningful section.
- Use a reading-window threshold that does not flicker between short sections.
- Keep the index local and lightweight on mobile.
Accessibility
Use real anchors and aria-current="location" for the active section. The indicator must never be the only cue, and the page must remain navigable when observers are unavailable.
Reduced motion
Change the active indicator without travel. Anchor scrolling remains native and section state remains readable.