Search code examples
ryamlr-markdownnavbarflexdashboard

Link R markdown title in flexdashboard to a page in the app

I have an R markdown document that uses flexdashboard and shiny. The document/app has several pages and I would like to be able to link the navbar title defined in the YAML header to the first page so that a user gets the feeling of being redirected to the "Home" page when clicking the title.

I've attached a very simple example of an .Rmd file that uses flexdashboard and has 2 pages. In this example the user should be directed to Page 1 when clicking on App title.

---
title: "App title"
output: flexdashboard::flex_dashboard
runtime: shiny
---



Page 1
====================================================================================

This is some random text on page 1...

Page 2
========================================================================================

And some even more random text on page 2....

I have seen examples where pages are linked within an external .yml file (bookdown) or where the logo/title is linked to an external site, but I couldn't find examples of how to link the navbar title to a section/page within the R markdown document itself.

To add complexity: in my app, the document is used for several applications and the title is therefore read in via an environment variable:

---
title: '`r Sys.getenv("TIER")`'

Any help is much appreciated!

Solution

  • To make the title clickable as link you can use additional JavaScript.

    <script>
   document.querySelector(".navbar-header").innerHTML =
            "<a href=\"path_to_destination\" class=\"navbar-brand navbar-inverse\">
                 My Dashboard
             </a>";
</script>

    The querySelector looks for the title element and replaces it with a custom one. Here I replace it with a link to the path_to_destination. You can see the class names which are added to the link, to format the link according to the predefined classes. Otherwise the link is not formatted like the title.

    As you said the title is based on some variable we can insert R code like in every other place in the document:

    <script>
   document.querySelector(".navbar-header").innerHTML =
            "<a href=\".\" class=\"navbar-brand navbar-inverse\">`r 2+2`</a>";
</script>