Master Slidev navigation and keyboard shortcuts. Use this skill for efficient slide control, custom shortcuts, and navigation customization.
This skill covers all navigation features in Slidev, including keyboard shortcuts, navigation bar, overview mode, and customizing navigation behavior.
| Key | Action |
|-----|--------|
| Space | Next animation or slide |
| → / Right | Next animation or slide |
| ← / Left | Previous animation or slide |
| ↑ / Up | Previous slide (skip animations) |
| ↓ / Down | Next slide (skip animations) |
| Key | Action |
|-----|--------|
| o | Toggle overview mode |
| d | Toggle dark mode |
| f | Toggle fullscreen |
| p | Toggle presenter mode |
| Key | Action |
|-----|--------|
| g | Go to specific slide |
| Home | Go to first slide |
| End | Go to last slide |
| Key | Action |
|-----|--------|
| Esc | Exit fullscreen/overview/drawing |
| e | Toggle drawing mode |
| r | Toggle recording |
Bottom-left corner of the slide (appears on hover).
o key/overview URL| Key | Action |
|-----|--------|
| ← → ↑ ↓ | Navigate grid |
| Enter | Select slide |
| Esc / o | Close overview |
g keyg → 15 → Enter
Goes directly to slide 15.
Create setup/shortcuts.ts:
import { defineShortcutsSetup } from '@slidev/types'
export default defineShortcutsSetup((nav, base) => {
return [
...base, // Keep default shortcuts
{
key: 'enter',
fn: () => nav.next(),
autoRepeat: true,
},
{
key: 'backspace',
fn: () => nav.prev(),
autoRepeat: true,
},
{
key: 'ctrl+f',
fn: () => nav.go(1),
},
]
})
| Property | Type | Description |
|----------|------|-------------|
| key | string | Key combination |
| fn | function | Action to perform |
| autoRepeat | boolean | Repeat when held |
// Single key
{ key: 'enter', fn: () => {} }
// Modifier + key
{ key: 'ctrl+s', fn: () => {} }
// Multiple modifiers
{ key: 'ctrl+shift+s', fn: () => {} }
ctrlshiftaltmeta (Cmd on Mac)<script setup>
import { useNav } from '@slidev/client'
const {
currentSlideNo, // Current slide number (ref)
currentPage, // Current page number
total, // Total slides
clicks, // Current click count
next, // Go to next
prev, // Go to previous
go, // Go to slide number
nextSlide, // Next slide (skip animations)
prevSlide, // Previous slide (skip animations)
} = useNav()
</script>
<template>
<!-- Custom navigation buttons -->
<button @click="nav.prev()">Previous</button>
<button @click="nav.next()">Next</button>
<button @click="nav.go(1)">Go to Start</button>
<button @click="nav.go(total.value)">Go to End</button>
</template>
<script setup>
import { useNav } from '@slidev/client'
const nav = useNav()
</script>
<!-- components/ProgressBar.vue -->
<script setup>
import { computed } from 'vue'
import { useNav } from '@slidev/client'
const { currentSlideNo, total } = useNav()
const progress = computed(() =>
(currentSlideNo.value / total.value) * 100
)
</script>
<template>
<div class="fixed top-0 left-0 right-0 h-1 bg-gray-200">
<div
class="h-full bg-blue-500 transition-all"
:style="{ width: `${progress}%` }"
/>
</div>
</template>
<!-- components/PageNumber.vue -->
<script setup>
import { useNav } from '@slidev/client'
const { currentSlideNo, total } = useNav()
</script>
<template>
<div class="fixed bottom-4 right-4 text-sm">
{{ currentSlideNo }} / {{ total }}
</div>
</template>
<!-- components/NavButtons.vue -->
<script setup>
import { useNav } from '@slidev/client'
const { prev, next, currentSlideNo, total } = useNav()
</script>
<template>
<div class="fixed bottom-4 flex gap-2">
<button
@click="prev()"
:disabled="currentSlideNo === 1"
class="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
>
Previous
</button>
<button
@click="next()"
:disabled="currentSlideNo === total"
class="px-4 py-2 bg-blue-500 text-white rounded disabled:opacity-50"
>
Next
</button>
</div>
</template>
Screen is divided into:
---
# In frontmatter
---
Custom CSS to disable:
.slidev-page {
pointer-events: none;
}
http://localhost:3030/5 # Slide 5
http://localhost:3030/10 # Slide 10
http://localhost:3030/presenter
http://localhost:3030/presenter/5 # Presenter at slide 5
http://localhost:3030/overview
Slides numbered 1 to N based on order.
---
routeAlias: introduction
---
Access via:
http://localhost:3030/introduction
[Go to Introduction](/introduction)
<script setup>
import { watch } from 'vue'
import { useNav } from '@slidev/client'
const { currentSlideNo } = useNav()
watch(currentSlideNo, (newSlide, oldSlide) => {
console.log(`Navigated from ${oldSlide} to ${newSlide}`)
})
</script>
Essential for smooth presenting:
Space / → - Forward← - Backo - Overviewg - Go to// If you prefer Enter/Backspace
{
key: 'enter',
fn: () => nav.next(),
}
CSS to hide nav bar:
.slidev-nav {
display: none;
}
Global bottom component for progress.
Before presenting:
When configuring navigation:
// setup/shortcuts.ts
import { defineShortcutsSetup } from '@slidev/types'
export default defineShortcutsSetup((nav, base) => {
return [
...base, // Keep defaults
// Custom shortcuts
{ key: '[key]', fn: () => nav.[action]() },
]
})
NAVIGATION PLAN:
CUSTOM COMPONENTS:
npx skills add yoanbernabeu/slidev-navigation下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer