ld-navigation - Vaadin Add-on Directory
Routing-like element for the modern Web
# ld-navigation [](https://travis-ci.org/tpluscode/ld-navigation) [](https://codecov.io/gh/tpluscode/ld-navigation)
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**.
### <ld-navigator>
> 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
### <ld-link>
> Initiate transition between application states
## Demos
[Demos and sort-of documentation](https://routing.hypermedia.app/demo/).
[`ld-navigation` also plays nice with location.hash history](https://routing.hypermedia.app/demo/#use-hash).
## Installation
Run `yarn add ld-navigation`
In your code
```js
// 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**
## Usage
Let's assume that:
* Your website is at `http://www.my.app/`.
* Your Linked Data API is at `http://api.my.app/`.
``` html
get people
get projects
```
With the above code, when you click the first link, the browser moves to `http://www.my.app/http://api.my.app/people` and the
`resource-url-changed` event is fired.
### Base URL
Obviously an URL like `http://www.my.app/http://api.my.app/people` is ugly (and, well, invalid). It is possible to get rid of the API domain
by adding an attribute to the `` tag:
``` html