How can I add custom titles to untitled slides in the Reveal.js menu?

[danielvartan]

Description

Hi there, 👋

I'm trying to set titles for slides that currently appear as untitled in the Reveal.js menu.

Using Quarto, I can create untitled slides like the ones below, but the issue is that these untitled slides clutter the presentation menu.

---
title: "Example"
format: revealjs
---

# Example

---

Some content

---

## {background-iframe="https://quarto.org/" background-interactive=true}

## Example

Some content

I’m aware of the hideMissingTitles option, which can hide these slides from the menu, but that’s not what I’m looking for. I need these slides to remain findable, just with appropriate titles

format:
  revealjs:
    menu:
      hideMissingTitles: true

Does anyone have a solution for adding custom titles to untitled slides in the menu?

[mcanouil]

See related discussion and the "menu" plugin for Reveal.js documentation:

• Remove untitled slides from slide-list, but keep them visible #10478

[danielvartan]

Thank you @mcanouil .

[danielvartan]

To assist others, since one of the goals of this discussion tab on GitHub is to build a database of answers, here’s the solution:

Simply add the data-menu-title attribute to the slide (see the example below):

---
title: "Example"
format: revealjs
---

## {data-menu-title="Custom Menu Title 1"}

Some content.

## {data-menu-title="Custom Menu Title 2" background-iframe="https://quarto.org/" background-interactive=true}

---

Note: This will not work for slides created using `---`. 

In these cases, it's best to use an empty heading, like so: `# {data-menu-title="Custom Menu Title 3"}`.

---