Simplemenu

For Reveal.js and Quarto

Table of Contents

Slide 1

A paragraph with some text and a link.

Vertical slide 1

Vertical slide 2

Global options

The options below have user configurable options. In a regular Reveal.js presentation, these can be set through JavaScript, but Quarto makes it configurable through YAML options.

1. menubarclass
2. menuclass
3. activeclass
4. activeelement

5. barhtml
6. flat
7. scale

Option 1: menubarclass

The menubarclass option sets the classname of menubars.

format:
  revealjs:
    ...
    simplemenu:
      menubarclass: "menubar"

Simplemenu will show the menubar(s) on all pages. If you do not want to show the menubar on certain pages, use data-state=“hide-menubar” on that section. This behaviour also works when exporting to PDF using the Reveal.js ?print-pdf option.

Option 2: menuclass

The menuclass option sets the classname of the menu.

format:
  revealjs:
    ...
    simplemenu:
      menuclass: "menu"

Simplemenu looks inside this menu for list items (LI’s).

Option 3: activeclass

The activeclass option is the class an active menuitem gets.

format:
  revealjs:
    ...
    simplemenu:
      activeclass: "active"

Option 4: activeelement

The activeelement option sets the item that gets the active class.

format:
  revealjs:
    ...
    simplemenu:
      activeelement: "li"

You may want to change it to the anchor inside the li, like this: activeelement: "a".

Option 5: barhtml

You can add the HTML for the header (and/or footer) through this option. This way you no longer need to edit the template.

format:
  revealjs:
    ...
    simplemenu:
      barhtml:
        header: "<div class='menubar'><ul class='menu'></ul></div>"
        footer: ""

Option 5: barhtml (Continued)

You can also move the slide number or the controls to your header or footer. If they are nested there manually, or through the barhtml option, they will then display inside that header or footer.

format:
  revealjs:
    ...
    simplemenu:
      barhtml:
        header: ""
        footer: "<div class='menubar'><ul class='menu'></ul><div class='slide-number'></div></div>"

Option 6: flat

Sometimes you’ll want to limit your presentation to horizontal slides only. To still use ‘chapters’, you can use the flat option. By default, it is set to false, but you can set it to true. Then, when a data-name is set for a slide, any following slides will keep that menu name.

format:
  revealjs:
    ...
    simplemenu:
      flat: true

To stop inheriting the previous slide menu name, start a new named section, or add data-sm="false" to your slide.

Option 7: scale

When you have a lot of subjects/chapters in your menubar, they might not all fit in a row. You can then tweak the scale in the options. Simplemenu copies the Reveal.js (slide) scaling and adds a scale option on top of that.

format:
  revealjs:
    ...
    simplemenu:
      scale: 0.67

It is set to be two-thirds of the main scaling.

More demos

For more demos go to the Simplemenu plugin for Reveal.js. Not all of the options in the regular plugin are available in the Quarto plugin.