A lightweight, framework-agnostic TypeScript library. Scroll through sections and the URL updates cleanly to /about instead of
/#about.
Zero dependencies. Under 2kb.
Standard anchor links append a hash to your URL when users navigate. hashfree intercepts clicks and uses the History API with IntersectionObserver to keep URLs clean at all times.
Hash fragments look unprofessional, clutter shared links, and leak implementation detail to your users.
Clean, shareable, bookmark-friendly URLs, exactly what your users expect from a modern website.
Install from npm, add data-section to your section elements, call
createSectionNav() once. Done.
import { createSectionNav } from 'hashfree';
const nav = createSectionNav({
sections: '[data-section]', // CSS selector or Element[]
updateStrategy: 'replace', // 'push' | 'replace'
threshold: 0.6, // 0–1, visibility ratio
onNavigate: (id) => {
// fires on every section change
console.log(`navigated to: ${id}`);
},
});
// later, when the component unmounts:
nav.destroy();
ⓘ Since hashfree rewrites paths (e.g. /about), configure your server to serve the same HTML for all paths, standard SPA fallback.
All options are optional. The defaults work for most single-page sites without any configuration.
createSectionNav( options )
sectionsupdateStrategythresholdrootMarginbasePath'docs' and scrolling to #about writes /docs/about instead of /aboutscrollBehavioronNavigateSectionNavInstance
destroy()navigateTo(id)The vanilla core works in any JavaScript environment. Framework adapters are coming as separate packages so you only ship what you use.