Add collapsible content overlays that slide over your existing slides from the bottom, top, left, or right. Originally created to overlay additional instructional content without having to clutter slides, the extension offers a cleaner alternative to static CSS modals which often interfere with the underlying content.

Try the live demo to see slideover in action.

• Works with Quarto Revealjs presentations
• Slides over the presentation from the right or bottom
• Optional auto-collapse after 5 seconds
• Mobile responsive

Install the extension with:

quarto add nrichers/slideover

To enable, add the extension to your YAML front matter:

format:
  revealjs:
    revealjs-plugins: 
      - slideover

Then add a slideover:

::: {.slideover--b}
Slides content over from the bottom.
:::

::: {.slideover--b .auto-collapse}
Slides content over from the bottom and then auto-collapses after five seconds.
:::

::: {.slideover--b .auto-collapse-10}
Slideover from the bottom that auto-collapses after 10 seconds.
:::

::: {.slideover--r}
Slides content over from the right.
:::

::: {.slideover--l}
Slides content over from the left.
:::

::: {.slideover--t}
Slides content over from the top.
:::

• Headings have special meaning in Quarto Revealjs presentations and are NOT supported inside slideovers.

• To insert a callout within a slideover, use the .embed class:

  ::: {.slideover--l}
  ::: {.embed}
  This is an embedded callout within a left-aligned slideover.
  :::
  :::

• You can modify the default size (40% for right or left, 80% for top or bottom) of any of the slideovers for more or less screen real estate:

  • .three-quarters — 3/4s or 75% of the default width.
  • .half — 1/2s or 50% of the default width.
  • .third — 1/3 or 33ish% of the default width.

  For example:

  ::: {.slideover--t .half}
  Slides content over from the top, at half-size.
  :::

• Slideover provides basic styling support for elements such as: links, emphasis, embedded callouts, quotations, and code blocks.
• To adjust basic elements in the default theme, edit custom-slideover.css to your liking.
• For advanced styling, use Tachyons Extension For Quarto.

MIT licensed. Copyright (C) 2025 Nik Richers.