breadcrumbs

Updated 16 days ago

nearly all web browsers do a poor job contextualizing individual web pages into their active browsing context. we often follow from one link to another in a complex, elongating, and branching path: this is particularly true if we’re browsing for research or learning (think “going down a rabbit hole”). browsers ultimately collapse the nuances of these traces down to a flat collection of things, relying on the user to keep context alive in their own head.

this complaint is not new, and people have also shared no shortage of concepts and demos attempting to address this challenge. ultimately this is not about browsers anyway. but you should now understand why you’ll see a small trail of breadcrumbs tracking your path when you move from page to page. i see it as a meaningful addition and a space to experiment in the ergonomics and structuring of information (which, in a very true sense, is what this entire site is ultimately about).

SvelteKit provides a robust set of navigation interceptors that allow us to do meaningful work when a user navigates from one page to the next.

beforeNavigate fires before a user is navigated to the next page and exposes an event object which provides us information about the request, like which page they are navigating to and they are navigating from:

let toId = currentPg.to.route.id || "";
let toSlug = currentPg.to.params?.slug || "";
let fromId = currentPg.from?.route.id || "";
let fromSlug = currentPg.from?.params?.slug || "";

note that it’s possible for some of these to be null, hence the escaping. from.route.id can be null if a user is navigating away from an error page, for example. in scenarios where a user is navigating to another domain entirely, to.route.id will be null.

i’m using a combination of Svelte’s stores and localStorage to create and persist breadcrumb information across reloads. if you navigate quickly to another domain and then navigate back to the last page you visited on my site, your breadcrumbs would be preserved.

in constructing and modifying our breadcrumb path, we need to recognize that the user might not be navigating forward to a brand new page, but instead backward in the trail that they had already established:

routeHistory.update((h) => {
    if ( toId == "/" || fromId == "/") {
        return [];
    } else if ( h.includes(toSlug) ) {
        return h.slice(0, h.indexOf(toSlug));
    } else if ( toId == "") {
        return [h];
    } else {
        return [...h, fromSlug];
    }
});

since information in localStorage persists until explicitly cleared, we need to appropriately clear the path as needed. for instance, in the case where a user navigates to another domain but then chooses to navigate back to the home page of the site, we clear out the breadcrumbs so the path does not erroneously display the last session:

import { routeHistory } from '$lib/stores/navigationHistory';

routeHistory.update(() => {
    return [];
});

over time, i want to be able to potentially provide a means for for people to navigate forward using the same affordance.