Routing-like element for the modern Web

ld-navigation Build Status codecov

A set of Web Components for data-driven Linked Data REST client in the browser.

With ld-navigation you let actual Linked Data be the router of your application.

You then simply GET and decide what to display based on the data returned. No more client-side routing.


Control current resource in relation to document path Maintain browser history with HTML history API Set up base resource URL and base client path to tweak routing


Initiate transition between application states


Demos and sort-of documentation.

ld-navigation also plays nice with location.hash history.


Run yarn add ld-navigation

In your code

// main element, required
import 'ld-navigation/ld-navigator'
// optionally, to wrap links
import 'ld-navigation/ld-link'
// optionally, to initiate navigation manually
import fireNavigation from 'ld-navigation/fireNavigation'

No external dependencies


Let's assume that:

  • Your website is at
  • Your Linked Data API is at
<!-- navigator exposes a resourceUrl property, see below -->

<!-- ld-link replaces or wraps anchor -->
<ld-link resource-url="">get people</ld-link>
<ld-link resource-url="">
    <a>get projects</a>

var navigator = document.querySelector('ld-navigator')
navigator.addEventListener('resource-url-changed', function(e) {
    // same url sits in e.detail.resourceUrl
    var nextUrl = navigator.resourceUrl;

    // no go ahead and $.get or window.fetch your data from nextUrl

With the above code, when you click the first link, the browser moves to and the resource-url-changed event is fired.

Base URL

Obviously an URL like is ugly (and, well, invalid). It is possible to get rid of the API domain by adding an attribute to the <ld-navigator> tag:

<ld-navigator base=""></ld-navigator>

This way the API domain is stripped out from the browser address bar and remains. This is where client-side routing becomes virtually obsolete.


ld-navigation will also play nice with Polymer - see the demos above.


Tests are written with @open-wc/testing.

yarn install
yarn test:local


Link to this version
ImportedReleased 22 January 2019MIT License
Framework Support
Browser Independent
Install with
npm install ld-navigation"@0.5.2"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.5.2