Add external hyperlink to tabPanel or navbarMenu in r Shiny

Question

I am trying to add external hyperlinks to the tabPabel and navbarMenu tabs/dropdowns in a navbarPage setup in Shiny (using bootstrapPage). I found multiple questions that refer to linking to another tab within a Shiny app, but I want to specifically link to another webpage without opening a new browser window.

I found the following questions that kind of get there:

How to direct to another web page after clicking tabPanel in Shiny App

Open URL by tabPanel in Shiny

The second question is what I want to do; however, when I use the following method to accomplish this, it adds a "phantom" tab:

tabPanel(a("Open Sales Gsheet", href="http://google.com", target="_blank"))

Here is some example code for the Shiny app setup that I am working with:

library(shiny); library(shinythemes)

ui <- bootstrapPage("", 
                navbarPage(
                  id = "navbar", 
                  theme = shinytheme("yeti"),
                  title = a("Home", href = "https://google.com", style = "color:white;"),  ## page title with hyperlink and browser tab title (works as intended)

                  tabPanel(title = HTML("Panel_1</a></li><li><a href='http://google.com' target='_blank'>test")),  ## tabPanel hyperlink test (adds "phantom" tab)

                  navbarMenu(title = "Test Menu", 
                             tabPanel(title = a("Open Sales Gsheet", href="http://google.com", target="_blank"))   ## navbarMenu hyperlink test (adds "phantom" option)
                             )
                  )
            )

server <- function(input, output, session) {

  ## empty server

  }

shinyApp(ui, server)

Here is a screenshot of the "phantom" tab issue:

https://i.imgur.com/tIYbhzT.png

As you can see, both the tabPanel and navbarMenu tabs/dropdowns have additional "phantom" tabs that have been added as a result. The first question I posted above shows an answer that involves editing the html code (or the list that is produced in R)... but I cannot figure out how to do this with a tabPanel or navbarMenu object.

I just want this to look like a normal navbarPage dropdown where the tabPanel and navbarMenu selections link to an external site (in the same browser window - browseURL as an observeEvent in the server script does not work since it opens in another window). Any help would be appreciated!

well you can try embedding the pages in iframes, but the site owners can decide whether they allow that: stackoverflow.com/questions/9158024/…. — Tonio Liebrand
This actually might be what I'm looking for. It will take some re-working of things, but I think I might be able to make it work. Thank you! — fromtheloam

Paul Campbell Paul Campbell · Accepted Answer · 2019-05-07T12:01:51

It's tricky to add custom elements in a shiny navbar page but it can be done with some javascript. The following code should add your link to the dropdown menu in the navbar. Save it as a .js file in your app's base directory then include the script in your ui function.

navAppend.js in your app's base directory:

$(document).ready(function() {
  $(".navbar .container-fluid .navbar-nav .dropdown .dropdown-menu").append('<li><a href="https://google.com" target="_blank">Open Sales Gsheet</a></li>');
});

in your ui:

ui <- tagList(
  tags$head(includeScript("navAppend.js")),
  navbarPage(
    id = "navbar", 
    theme = shinytheme("yeti"),
    title = a("Home", href = "https://google.com", style = "color:white;"),  ## page title with hyperlink and browser tab title (works as intended)

    # nav menu the link will be added to
    navbarMenu(title = "Test Menu")
  )
)

Add external hyperlink to tabPanel or navbarMenu in r Shiny

1 Answers