Intercept Links & Swap Content with Ease
Make your site feel like a single-page app without a framework. In this 30-second demo, we use the Navigation API to intercept same-origin links, swap the main content from tiny templates, keep browser history working, and preserve accessibility with focus management and aria-current. If available, we wrap swaps in a View Transition for that premium polish.
Watch till the end for the progressive enhancement fallback—no support? Links still load the correct view.
Video Title: Navigation API: Intercept Links, Swap Content, Real History — No Framework
What you’ll learn.
• navigation.navigate event and e.canIntercept.
• Same-origin guard for safe interception.
• Swapping content from templates into the main region.
• History and back/forward still work.
• Focus reset to main and aria-current for active tabs.
• Optional document.startViewTransition for smooth page swaps.
• Progressive enhancement: links hard-reload to the right view when unsupported.
#navigationapi #viewtransitions #javascript #vanillajs #webdev #frontend #uidesign #spa #accessibility #progressiveenhancement #webplatform #performance #routing #modernweb