# Navigation bar

Controls the bottom floating navigation bar: Select and Pan (`toolControls`, each shown while its tool is enabled, the one in use marked), then previous, the page number, "of N", next, zoom out, the zoom value, zoom in. First and last pages fold into the number box (type a page, or use Home/End); the zoom value opens a menu with Fit width (⌘1), Fit page (⌘0) and the presets, the one in effect ticked. The bar stays at full strength; with `fade` it fades to 40% after three seconds without scrolling or pointer movement and returns on any, so it stops covering the bottom of the page being read. The section also holds the keyboard shortcuts switch and the zoom range, steps and initial level.

- Interface: `NavigationBarConfig`
- Config path: `config.navigation`

## Example

```ts
navigation: {
  fade: true,
  keyboardShortcuts: true,
  zoomPresets: [0.5, 0.75, 1, 1.5, 2],
  minZoom: 0.25,
  maxZoom: 4,
  defaultZoom: 'fit-width',
}
```

## Options (12)

### `enabled`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/enabled

Show or hide the navigation bar.

```ts
navigation: { enabled: false }
```

### `pageControls`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/pagecontrols

Previous, page number "of N", next. First and last pages fold into the number box: type a page, or use Home/End. With `pageControls`, `zoomControls` and `toolControls` all off, no bar is mounted at all.

### `zoomControls`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/zoomcontrols

Zoom out, the zoom value + menu, zoom in. The zoom value opens a menu with Fit width (⌘1), Fit page (⌘0) and the presets, the one in effect ticked.

### `toolControls`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/toolcontrols

Select and Pan at the start of the bar, for each that is enabled, the one in use marked.

### `fade`

- Type: `boolean`
- Default: `false`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/fade

Fade to 40% after three seconds without activity (scrolling or pointer movement), back on any, so the bar stops covering the bottom of the page being read.

```ts
navigation: { fade: true }
```

### `keyboardShortcuts`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/keyboardshortcuts

Enable keyboard shortcuts. `false` turns the page-level shortcuts off, Ctrl / ⌘ + Z included; Escape, and the keys that act on something selected (a placed object, the search bar, Enter in Add Text), belong to that control and stay on. See [Keyboard shortcuts](https://kernstra.com/docs/web-sdk/guides/keyboard) for the full list.

```ts
navigation: { keyboardShortcuts: false }
```

### `zoomPresets`

- Type: `readonly number[]`
- Default: `0.5, 0.75, 1, 1.25, 1.5, 2, 3`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/zoompresets

Zoom menu levels and button steps (1 = 100%), kept inside `minZoom`–`maxZoom`. The default applies when the option is left out (it is not a key of `DEFAULT_CONFIG`). Presets are sorted and de-duplicated; a level outside `minZoom`–`maxZoom` is left out with a console warning. When none is left, the default levels inside the range are used, and when none of those fits either, the range's two ends — the zoom menu never offers a level the viewer will not reach.

```ts
navigation: { zoomPresets: [0.5, 1, 1.5, 2] }
```

### `wheelZoom`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/wheelzoom

Trackpad pinch / Ctrl+wheel over the pages zooms the document, around the pointer, so what is under it stays put — instead of the browser zooming the whole page.

### `pinchZoom`

- Type: `boolean`
- Default: `true`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/pinchzoom

Two-finger pinch on a touchscreen zooms the document, around the point between the fingers, which the document follows as they move — instead of the browser zooming the whole page. A pinch begun while a drawing tool is drawing with the first finger calls that stroke off. Off, pinching is left to the browser; do not add `user-scalable=no` to the viewport meta tag (see [Quick start and the container](https://kernstra.com/docs/web-sdk/guides/container)).

### `minZoom`

- Type: `number`
- Default: `0.25`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/minzoom

Smallest zoom the controls and the wheel reach. A fit mode may land below it on a narrow screen.

### `maxZoom`

- Type: `number`
- Default: `8`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/maxzoom

Largest zoom they reach; past the last preset the buttons step by a quarter. Text and vector art stay sharp up to it: a page bitmap is bounded by [`performance.maxRenderPixels`](https://kernstra.com/docs/web-sdk/config/performance/maxrenderpixels), and past that the part in view is drawn again at full resolution over it.

### `defaultZoom`

- Type: `'fit-width' | 'fit-page' | number`
- Default: `'fit-width'`
- Page: https://kernstra.com/docs/web-sdk/config/navigation/defaultzoom

Initial zoom level on load. A number is a scale (e.g. `0.75` = 75%, `1.5` = 150%), and a ceiling: a page that would overflow the width at it opens at fit-width instead, on any screen; a phone-sized layout (narrow/tiny) fits it again when turned or shrunk to that size. A zoom below fit-width stays.

- `'fit-width'`: Default. Fits page width to container.
- `'fit-page'`: Fits entire page into viewport.
- `number`: A scale (`0.75` = 75%, `1.5` = 150%), and a ceiling: a page that would overflow the width at it opens at fit-width instead.

```ts
navigation: { defaultZoom: 'fit-page' }
```

Web page: https://kernstra.com/docs/web-sdk/config/navigation