# Navigation API

```tsx
import { NavigationProgress } from 'solid-route-progress/navigation'

const Layout = (props) => (
  <>
    <NavigationProgress />
    {props.children}
  </>
)
```

It works without a router.

## `<NavigationProgress>`

Every [`<Progress>` prop](https://solid-route-progress.vercel.app/docs/components.md), plus:

| Prop      | Default | Meaning                                                  |
| --------- | ------- | -------------------------------------------------------- |
| `filter`  |         | `(event) => boolean` on the `navigate` event; `false` skips it |
| `timeout` | `10000` | safety net for navigations that never unload; `0` disables it |

```tsx
<NavigationProgress filter={(event) => event.navigationType !== 'replace'} />
```

## When the bar completes

| Navigation                                    | Bar                                              |
| --------------------------------------------- | ------------------------------------------------ |
| intercepted by a router                       | holds until `navigatesuccess` / `navigateerror`  |
| `navigateerror` with an `AbortError`          | fades out without reaching 100%                  |
| `navigateerror`, anything else                | completes as an [`'error'`](https://solid-route-progress.vercel.app/docs/controller.md#start) |
| plain `pushState`, nobody intercepting        | commits before the first paint, so nothing shows |
| cross-document                                | holds until the page unloads                     |
| back from the bfcache                         | fades out                                        |
| hash change, `download`, `data-sp-ignore`     | nothing                                          |
| canceled by another listener                 | nothing                                          |

Each navigation holds the bar on its own.

## Where the API is missing

Nothing is tracked; `<NavigationProgress>` renders an idle bar. `solid-route-progress/router`'s cross-document tracking needs it too.

## `createNavigationProgress()`

```tsx
import { createProgress, Progress } from 'solid-route-progress'
import { createNavigationProgress } from 'solid-route-progress/navigation'

const progress = createProgress()
createNavigationProgress(progress, { timeout: 5000 })

<Progress controller={progress} />
```

`@solidjs/router` loads outside the Navigation API, so use [`solid-route-progress/router`](https://solid-route-progress.vercel.app/docs/router.md) for it.