# navigo

> A simple vanilla JavaScript router

Latest version **8.11.1** (published 2021-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install navigo
pnpm add navigo
yarn add navigo
bun add navigo
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 8.11.1 |
| Published | 2021-04-23 |
| First published | 2015-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 437.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2829 |
| Author | Krasimir Tsonev |
| Maintainers | krasimir |
| Keywords | router, vanilla, history |

## Links

- npm: https://www.npmjs.com/package/navigo
- Repository: https://github.com/krasimir/navigo
- Homepage: https://github.com/krasimir/navigo#readme
- Issues: https://github.com/krasimir/navigo/issues
- npm.io page: https://npm.io/package/navigo

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 8.11.1 (latest) — 2021-04-23
- 8.11.0 — 2021-03-26
- 8.10.1 — 2021-03-16
- 8.10.0 — 2021-03-16
- 8.9.1 — 2021-03-04
- 8.9.0 — 2021-02-28
- 8.8.12 — 2021-02-15
- 8.8.11 — 2021-02-14
- 8.8.10 — 2021-02-14
- 8.8.9 — 2021-02-10
- 8.8.8 — 2021-02-10
- 8.8.7 — 2021-02-09
- 8.8.6 — 2021-02-07
- 8.8.5 — 2021-02-07
- 8.8.4 — 2021-02-02
- … 146 more at https://npm.io/package/navigo/versions

## README

# Navigo

A simple dependency-free minimalistic JavaScript router

[![npm downloads](https://img.shields.io/npm/dm/navigo.svg?style=flat-square)](https://www.npmjs.com/package/navigo)
![size](https://badgen.net/bundlephobia/minzip/react)

* [v.8+ documentation](./DOCUMENTATION.md)
* [v.7 documentation](./README_v7.md)
* [Examples](./examples)
* [Changelog](./CHANGELOG.md)
* Using React? Checkout [navigo-react](https://github.com/krasimir/navigo-react) package.
* 🎮  Online playground here [codesandbox.io/s/navigo-example-jrui8](https://codesandbox.io/s/navigo-example-jrui8);

- [Navigo](#navigo)
  - [Selling points](#selling-points)
  - [Installation](#installation)
  - [Quick start](#quick-start)
  - [Development](#development)
  - [Building](#building)
  - [Tests](#tests)
  - [MISC](#misc)

## Selling points

* Dependency free
* ~10KB minified, ~4KB gzipped
* Based on [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) so it does update the URL of the page
* Supports hash based routing too
* Simple mapping of route to a function call
* Parameterized routes
* Navigating between routes
* Hooks (_before_, _after_, _leave_, _already_)
* Not-found and default handler
* Easy integration with HTML links via `data-navigo` HTML attribute

---

## Installation

Drop the following into your page:

```html
<script src="//unpkg.com/navigo"></script>
``` 

or via npm/yarn:

```bash
> npm install navigo --save
> yarn add navigo -S
```

## Quick start

```js
const router = new Navigo('/');
```

The constructor of the library accepts a single argument - the root path of your app. If you host your project at `https://site.com/my/awesome/app`, your root path is `/my/awesome/app`. Then you have to define your routes.

```js
router.on('/products/list', function () {
  // do something
});
```

At the end you have to trigger the resolving logic:

```js
router.resolve();
```

After that when you need a page change call the `navigate` method. This one changes the URL and (by default) triggers `resolve`.

```js
router.navigate('/about');
```

Add `data-navigo` attribute to your page links and they'll be transformed into `navigate` callers.

```html
<a href="/about/contacts" data-navigo>Contacts</a>
```

Checkout the [online playground](https://codesandbox.io/s/navigo-example-jrui8) to see it in action.

## Development

```
> yarn dev
```

## Building

```
> yarn build
```

## Tests

```
> yarn test
> yarn test-watch
```

## MISC

* [A modern JavaScript router in 100 lines](http://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url)

---
_Source: https://npm.io/package/navigo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._