glyphnav/next

Watch the address bar. Current path: /

Docs

Install the package — Next.js stays a peer dependency:
pnpm add glyphnav
GlyphnavLink is a drop-in for next/link; nothing is patched globally:
// app/providers.tsx  ('use client')
import { GlyphnavProvider, GlyphnavLink, useGlyphnavNavigate } from 'glyphnav/next';

<GlyphnavProvider duration={250} commit="before" routerMode="app">
  <GlyphnavLink href="/about?tab=2#top">About</GlyphnavLink>
</GlyphnavProvider>;

// imperative, mirrors useRouter().push:
const navigate = useGlyphnavNavigate();
await navigate('/dashboard');
One adapter, both Next routers (App or Pages) — and base-path aware:
// Pages Router? Flip one option — the adapter then drives
// next/compat/router instead of next/navigation:
<GlyphnavProvider routerMode="pages">…</GlyphnavProvider>

// Served under a base path? Pass it so commit: 'after' stays accurate:
<GlyphnavProvider basePath="/glyphnav/next">…</GlyphnavProvider>
Every entry point accepts the same options object:
<GlyphnavProvider
  duration={250}        // total animation time (ms), spread over all frames
  effect="scramble"     // 'decode' grows + resolves; 'scramble' bursts, then locks randomly
  commit="before"       // navigate instantly, animate on top ('after' = classic order)
  routerMode="app"      // 'app' (next/navigation) or 'pages' (next/compat/router)
  scope="tail"          // animate only the part that differs from the current path
  animatePopState       // also animate browser back/forward (opt-in)
>

Served under the /next base path via Next's basePath; the App Router performs the real navigation while glyphnav animates the bar. The title link is a plain anchor (full page load back to the picker).