Reveal.js Tabset

Quarto Extension

Mickaël CANOUIL, Ph.D.

Introduction

What is Reveal.js Tabset?

This extension brings proper tabset support to Reveal.js presentations.

  • Navigate through tabs using arrow keys or space bar.
  • Tabs are treated as fragments.
  • ARIA roles are wired automatically.
  • PDF export support.

How it works

The plugin automatically detects panel tabsets in your slides and enables fragment-based navigation.

Installation

Install the extension using:

quarto add mcanouil/quarto-revealjs-tabset@1.4.0

Basic Setup

Add to your document YAML:

format:
  revealjs: default
revealjs-plugins:
  - tabset

Tabs automatically appear on separate pages when exporting to PDF. No additional configuration is needed.

Basic Example

Simple Tabset

This is the content of the first tab.

  • Point 1.
  • Point 2.
  • Point 3.

This is the content of the second tab.

  • Different point 1.
  • Different point 2.
  • Different point 3.

This is the content of the third tab.

Bold text and italic text.

Advanced Example

Tabset with Fragments

This tab contains fragments.

First fragment appears.

Second fragment appears.

More detailed information here.

  • Item 1.
  • Item 2.
  • Item 3.

Summary of the topic.

Initial Active Tab via tab-active

The second tab opens first thanks to tab-active="1"; Pandoc emits it as data-tab-active="1".

You would expect this tab to be active by default; it is not.

This tab is active first; the index is zero-based.

A third tab to round out the example.

Skip PDF Cloning Per Slide

This slide carries data-tabset-skip-pdf-clone, so its PDF export keeps a single page showing only the first tab.

This tab is exported.

This tab is hidden during PDF export for this slide only.

Features

Key Features

  1. Fragment Navigation: Tabs are treated as fragments, allowing smooth navigation.
  2. ARIA Semantics: role="tablist", role="tab", and role="tabpanel" are applied automatically.
  3. PDF Export: Each tab appears on its own PDF page automatically, with per-slide opt-out.
  4. Multiple Tabsets: Support for multiple tabsets per slide.
  5. Nested Fragments: Fragments within tabs are properly indexed.

Usage Tips

  • Use arrow keys or space to navigate through tabs.
  • Going backwards (left arrow) returns to the previous tab.
  • Works seamlessly with Quarto’s native tabset syntax.

Thank You

Questions?

Feel free to ask any questions about the Reveal.js Tabset extension.