Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



22 Commits

Repository files navigation


Helper function for handling internal navigation in Single Page Apps (SPAs) in ~250 bytes before gzip.

Since events bubble you add a single click handler at the root of your app and then use this little utility to determine if it should be considered an internal navigation event. If it is internal it calls the function you supplied it. That's it!

How it works

It works by examining the event and event target. First it makes sure this was a left click (button 0) and that no modifier keys were being pressed (shift, ctrl, etc). If the event qualifies as a basic click, then it examines the It looks for an <a> tag first on the target element itself, then starts walking up the element tree looking to see if the target was wrapped in an <a> tag. If it finds one with an origin that matches window.location.origin and that doesn't have a target='_blank' or a target='_external' on it, then it's considered an internal navigation and calls the function you supplied with the new pathname.

Why would you want this?

  1. Instead of using some <Link/> abstraction, you can just use plain old, <a/> tags anywhere in your app. This means, that everything that browsers do with a links, still works. Like when you hover them it shows the actual URL, etc.
  2. It's puny at only ~250 bytes (before gzip)!
  3. If for some reason your JS fails, it will navigate as usual because you're using real links in your app.
  4. It won't mess with normal browser behavior, so it will never consider a CTRL+click, right-click, or clicking a tag with a target="_blank" to be an internal navigation event.
  5. It's not tied to any framework, as long as you have some sort of function to call for setting a pathname you're good.
  6. Because there's very little magic, it promotes understanding of how these things actually work.


npm install internal-nav-helper


This works with any framework it's just inspecting DOM events. But I like Preact and redux-bundler so here's an example for that setup:

import { h } from 'preact'
import { connect } from 'redux-bundler-connect'
import { getNavHelper } from 'internal-nav-helper'

const RootComponent = ({ doUpdateUrl }) => (
  <div onClick={getNavHelper(doUpdateUrl)}>
    <h1>Your app</h1>
    <a href="/something">Some internal link will be handled</a>
    <a href="/other" target="_blank">
      An internal link that should open in new window
    <a href="/same-origin-different-app" target="_external">
      Technically same origin, but will be ignored because of
    <a href="">
      An external link it will not try to handle this

export default connect(


  • 3.1.0 now ignores rel="external" closes #3. Updated to latest microbundle.
  • 3.0.0 changing how second internal function is exposed. Updated microbundle to latest. (fumbled 2.x deploys, bumping major incase someone happened to install 2.x)
  • 1.2.0 now exposes its internal findAnchorTag method.
  • 1.1.0 now ignores links with download attribute (thanks @huygn). Updated dependencies. Removed sourcemaps (seemed unnecessary).
  • 1.0.2 fixed issues in IE.


If you like this follow @HenrikJoreteg on twitter.




Helper function for handling internal navigation in Single Page Apps (SPAs) in ~250 bytes before gzip.






No packages published