🧭 Navigation

How does the audience move through the deck, and how do I present it?

2 min readView as markdown

Keyboard

KeyAction
→, Space, Page DownNext slide or fragment
←, Page UpPrevious slide or fragment
HomeFirst slide
EndLast slide
FToggle fullscreen
OToggle 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 ids — 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:

<Presentation maxDuration={25}>

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

Driving navigation yourself

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 for everything useNavigation returns.

IntroductionWhat is Narro, and should I be writing markdown or React?
InstallationWhat do I install, and what does the project look like afterwards?
First DeckWhat does a working React deck look like, end to end?
Markdown ModeHow do I split a slide, style one word, or reveal a line — without leaving the markdown file?
Writing AI PromptsWhat do I tell an AI so the deck it writes actually builds?
Rules for AI AgentsWhat do I paste into my repo so an agent stops writing decks that build wrong?
React APIWhich component or hook do I import, and what does it take?
CLIWhich command do I run, and what are its flags?
Markdown APIHow do I read, edit, or validate a deck file from my own code instead of by hand?
Component ReferenceWhat props does this component take, and which package do I import it from?
Verifying a deckHow do I know my deck is actually correct?
AnimationHow do I reveal a list one line at a time, or move between slides with something other than a cut?
NavigationHow does the audience move through the deck, and how do I present it?
Canvas & PositioningHow do I put something at an exact position instead of in the flow?
Images & MediaHow do I use an image as a background, tint it, or embed a video?
ArchitectureWhich package owns what, and why is the seam where it is?
Transform ModeHow do I zoom and pan across one big canvas instead of cutting between slides?
Import & ExportHow do I get this deck out as PPTX, PDF, or one file I can email?
AI IntegrationHow do I wire an AI assistant up to Narro so it can write and build decks?
ThemingHow do I change the colours, fonts, and overall look of a deck?
Deck TemplatesHow do I define one house style with named layouts my slides can reference, like a PowerPoint master?
TroubleshootingSomething is wrong with my deck. What is it, and how do I fix it?
LimitationsWhat can't Narro do, and what do I do instead?