The hardware and bandwidth for this mirror is donated by dogado GmbH, the Webhosting and Full Service-Cloud Provider. Check out our Wordpress Tutorial.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]dogado.de.

Getting started with deckroadmap

Overview

deckroadmap adds section-aware roadmap footers to Reveal.js presentations created with Quarto or R Markdown.

The goal is simple: help audiences understand where they are in the flow of a presentation. Instead of only knowing how many slides are left, they can see what has been covered, what section is active, and what comes next.

This vignette shows:

Basic idea

The workflow has two parts:

  1. Define the sections of your presentation with use_roadmap()
  2. Tag each slide with a matching data-roadmap value

A minimal example looks like this:

library(deckroadmap)

use_roadmap(
  sections = c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps")
)

The function returns an HTML tag with the configuration and dependencies needed for the roadmap footer.

Using deckroadmap in Quarto

In a Quarto Reveal.js document, call use_roadmap() in an R chunk near the top of the file.

A minimal example:

---
title: "deckroadmap Quarto demo"
format:
  revealjs:
    theme: default
---


``` r
library(deckroadmap)
use_roadmap(
  c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps"),
  style = "progress",
  active_bg_color = "#87CEEB"
)
```

## Welcome {data-roadmap="Intro"}

This is the opening slide.

## Why this matters {data-roadmap="Intro"}

Some framing content.

## The problem {data-roadmap="Problem"}

Describe the challenge here.

## What changed {data-roadmap="Problem"}

More problem context.

## Analysis overview {data-roadmap="Analysis"}

Start the analysis section.

## Key findings {data-roadmap="Analysis"}

Show results here.

## Recommendation {data-roadmap="Recommendation"}

Explain the recommendation.

## Tradeoffs {data-roadmap="Recommendation"}

Discuss caveats and decisions.

## Next steps {data-roadmap="Next Steps"}

End with the action plan.

## Q&A {data-roadmap="Next Steps"}

Questions.

Using deckroadmap in R Markdown

The same idea works for R Markdown Reveal.js slides.

---
title: "deckroadmap R Markdown demo"
output:
  revealjs::revealjs_presentation
---



## Welcome {data-roadmap="Intro"}

This is the opening slide.

## Why this matters {data-roadmap="Intro"}

Some framing content.

## The problem {data-roadmap="Problem"}

Describe the challenge here.

## What changed {data-roadmap="Problem"}

More problem context.

## Analysis overview {data-roadmap="Analysis"}

Start the analysis section.

## Key findings {data-roadmap="Analysis"}

Show results here.

## Recommendation {data-roadmap="Recommendation"}

Explain the recommendation.

## Tradeoffs {data-roadmap="Recommendation"}

Discuss caveats and decisions.

## Next steps {data-roadmap="Next Steps"}

End with the action plan.

## Q&A {data-roadmap="Next Steps"}

Questions.

Tagging slides

The roadmap depends on slide-level section tags such as:

## Analysis overview {data-roadmap="Analysis"}

The values used in data-roadmap should match the section names passed to use_roadmap().

For example, if the roadmap is defined as:

use_roadmap(
  c("Intro", "Analysis", "Recommendation")
)

then valid slide tags include:

## Welcome {data-roadmap="Intro"}
## Analysis overview {data-roadmap="Analysis"}
## Recommendation {data-roadmap="Recommendation"}

Built-in styles

deckroadmap currently includes three built-in styles.

Pill

The pill style is the default polished floating footer.

use_roadmap(
  c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps"),
  style = "pill"
)

Minimal

The minimal style has less visual weight and works well when you want simpler signposting.

use_roadmap(
  c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps"),
  style = "minimal"
)

Progress

The progress style emphasizes completed, current, and upcoming sections more strongly.

use_roadmap(
  c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps"),
  style = "progress"
)

Customization

You can customize font size, position, text colors, and, for the progress style, background colors.

Example: text styling

use_roadmap(
  c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps"),
  style = "pill",
  font_size = "14px",
  bottom = "12px",
  active_color = "#2563eb",
  done_color = "#374151",
  todo_color = "#9ca3af"
)

Example: progress colors

use_roadmap(
  c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps"),
  style = "progress",
  active_color = "#ffffff",
  done_color = "#ffffff",
  todo_color = "#334155",
  active_bg_color = "#2563eb",
  done_bg_color = "#475569",
  todo_bg_color = "#e2e8f0"
)

Previewing styles

Before rendering a full slide deck, you can preview a roadmap style with preview_roadmap().

preview_roadmap(
  sections = c("Intro", "Problem", "Analysis", "Recommendation", "Next Steps"),
  current = "Analysis",
  style = "progress"
)

This is helpful when experimenting with styles, colors, and section names.

Summary

deckroadmap provides a simple way to add section-aware roadmap footers to Reveal.js slides in Quarto and R Markdown. Define your sections once, tag slides with data-roadmap, choose a style, and optionally preview the result before rendering a full deck. This small amount of structure can make it easier for audiences to follow the flow of a presentation.

These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.
Health stats visible at Monitor.