The JavaScript Router that’s got Baked in Breadcrumbs

Hansel is the fairytale boy who left a trail of breadcrumbs in his wake so that he and sister Gretel could find their way out after being abandoned in the woods. Very forward and backward thinking of him. If Hansel and Gretel were navigating a website rather than a woods, the breadcrumbs become a set of Hyperlinks signposting their journey. The Navigation router is the first JavaScript router to dynamically track a user’s path through a website, dropping Hyperlink breadcrumbs as they go.

With other routers, you might’ve resorted to manipulating browser history. But using history.go(-1) is like forcing Hansel and Gretel to walk backwards along the trail and, because browser history can’t be interrogated, might lead the unsuspecting travellers into an entirely different woods. If you manually tracked the path, instead, your Hyperlinks might disappear when the browser is refreshed, much as Hansel’s breadcrumbs disappeared when set upon by birds.

The Navigation router stores its breadcrumb trail in the Url, so it won’t be eaten when the page is refreshed or opened in a new tab. You can see the breadcrumb trail in action in Angular, Knockout or React. These examples display a list of people. Selecting a person takes you through to their details and drops a Hyperlink breadcrumb that returns you back to the list of people.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s