---
name: global-context
description: Access navigation, slide info, and configuration programmatically
---

# Global Context & API

Access navigation, slide info, and configuration programmatically.

## Template Variables

Available in slides and components:

```md
Page {{ $page }} of {{ $nav.total }}
Title: {{ $slidev.configs.title }}
```

### $nav

Navigation state and controls:

| Property | Type | Description |
|----------|------|-------------|
| `$nav.currentPage` | number | Current page (1-indexed) |
| `$nav.currentLayout` | string | Current layout name |
| `$nav.total` | number | Total slides |
| `$nav.isPresenter` | boolean | In presenter mode |
| `$nav.next()` | function | Next click/slide |
| `$nav.prev()` | function | Previous click/slide |
| `$nav.nextSlide()` | function | Next slide |
| `$nav.prevSlide()` | function | Previous slide |
| `$nav.go(n)` | function | Go to slide n |

### $slidev

Global context:

| Property | Description |
|----------|-------------|
| `$slidev.configs` | Project config (title, etc.) |
| `$slidev.themeConfigs` | Theme config |

### $frontmatter

Current slide frontmatter:

```md
Layout: {{ $frontmatter.layout }}
```

### $clicks

Current click count on slide.

### $page

Current page number (1-indexed).

### $renderContext

Current render context:
- `'slide'` - Normal slide view
- `'overview'` - Overview mode
- `'presenter'` - Presenter mode
- `'previewNext'` - Next slide preview

## Composables

Import from `@slidev/client`:

```ts
import {
  useNav,
  useDarkMode,
  useIsSlideActive,
  useSlideContext,
  onSlideEnter,
  onSlideLeave,
} from '@slidev/client'
```

### useNav

```ts
const nav = useNav()
nav.next()
nav.go(5)
console.log(nav.currentPage)
```

### useDarkMode

```ts
const { isDark, toggle } = useDarkMode()
```

### useIsSlideActive

```ts
const isActive = useIsSlideActive()
// Returns ref<boolean>
```

### useSlideContext

```ts
const { $page, $clicks, $frontmatter } = useSlideContext()
```

## Lifecycle Hooks

```ts
import { onSlideEnter, onSlideLeave } from '@slidev/client'

onSlideEnter(() => {
  // Slide became active
  startAnimation()
})

onSlideLeave(() => {
  // Slide became inactive
  cleanup()
})
```

**Important:** Don't use `onMounted`/`onUnmounted` in slides - component instance persists. Use `onSlideEnter`/`onSlideLeave` instead.

## Conditional Rendering Examples

```html
<!-- Show only in presenter mode -->
<div v-if="$nav.isPresenter">
  Presenter notes
</div>

<!-- Hide on cover slide -->
<footer v-if="$nav.currentLayout !== 'cover'">
  Page {{ $nav.currentPage }}
</footer>

<!-- Different content by context -->
<template v-if="$renderContext === 'slide'">
  Normal view
</template>
<template v-else-if="$renderContext === 'presenter'">
  Presenter view
</template>
```

## Type Imports

```ts
import type { TocItem } from '@slidev/types'
```