# Navigation

> Keyboard, mouse, touch, URL routing, overview mode, and the presenter view

## Keyboard

| Key | Action |
| --- | --- |
| `→`, `Space`, `Page Down` | Next slide or fragment |
| `←`, `Page Up` | Previous slide or fragment |
| `Home` | First slide |
| `End` | Last slide |
| `F` | Toggle fullscreen |
| `O` | Toggle overview grid |

Disable with `<Presentation keyboard={false}>`, or `keyboard: false` in deck
frontmatter. Worth doing when a slide embeds something that wants the arrow keys
itself.

## Mouse and touch

Clicking the left or right edge of the deck moves a slide. On touch devices,
swipe left and right. Both are controlled by the `mouse` and `touch` props.

## URL routing

With `routing` enabled (the default), the URL tracks the current slide:

```
https://example.com/#/slide/intro     ← a slide with id="intro"
https://example.com/#/slide/3         ← the third slide, if it has no id
```

The number is **1-based**: `#/slide/1` is the first slide.

Links stay stable across edits when slides have explicit `id`s — the deck writes
the `id` into the URL, so the link survives a slide being inserted above it.
Without one, a slide's URL is its index, and inserting a slide earlier changes
it.

A link opened cold lands on the slide it names. The deck waits for its slides to
register before reading the hash, so `#/slide/7` in a fresh tab is slide 7 rather
than slide 1.

## Overview mode

`O` shows every slide as a grid. Arrow keys move the focus, `Enter` jumps.
Useful mid-talk when a question sends you backwards.

## Presenter view

`narro dev` serves a presenter view on a second port with the current slide, the
next slide, speaker notes, and a timer. Set `maxDuration` (minutes) on the deck
to get a countdown:

```tsx
<Presentation maxDuration={25}>
```

The two views stay in sync in both directions, so advancing on either moves
both.

## Driving navigation yourself

```tsx
import { useNavigation } from "@getnarro/core";

function Agenda() {
  const { goToSlideById } = useNavigation();

  return (
    <button type="button" onClick={() => goToSlideById("results")}>
      Skip to results
    </button>
  );
}
```

See the [React API](/docs/react-api) for everything `useNavigation` returns.