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!

Answer 1

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")
  )
)