How to escape single quote in Flexdashboard Navbar Menu?

Question

I'm using R markdown to create a flexdashboard. I'm having difficulty escaping a single quote in the title of one of my navbar menus.

I would like for my menu title to include a single quote and have tried escaping this with {data-navmenu="The Joneses\' House"}. If I knit that code, the navbar menu for The Joneses' House does not appear. If I remove the backslash and apostrophe (') and knit, the menu will appear (but with no apostrophe of course).

I've included my code below with YAML. In this code, the menu does not appear in the dashboard. How can I make it so that the menu title includes a single apostrophe? Thank you.

---
title: "Sample Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---

Bedroom {data-navmenu="The Joneses\' House"}
=====================================

Answer 1

I've got a fix, but it's not an escape.

I believe you will not be able to do anything short of JS to change this. flexdashboard uses the navigation tab name as the ID of an HTML element. An HTML element id can't have special characters.

My workaround doesn't seem to want to work with only this sparse bit of code. However, as soon as I added another tab, a bit of R code, or anything else, it works just fine.

I used JQuery to change the nav bar text after you render the page. You can place the fixit chunk with engine='js' anywhere in your script. Don't forget the space at the end of the string of text ("House "). It's part of the steps flexdashboard takes when it compiles the page.

The code

updated; I apparently lost the dropdown arrow

---
title: "Sample Dashboard"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---


Bedroom {data-navmenu='The Joneses House'}
=====================================

More info...



Bath {data-navmenu='The Other House'}
=====================================


```{r fixit, engine="js", results="asis"}

setTimeout(function(){ 
  tx = $('#TheJonesesHouse > a').html();
  tx = tx.replace("Joneses", "Joneses'");
  $('#TheJonesesHouse > a').html(tx);
}, 200); // for loading time

```

From the viewer pane (updated):

From my browser (updated):