Shiny remove extra row added by external link in navbar tab panel

Question

I'm trying to add an external link to the tab panel title in a shiny navbar. The link itself works fine, but it moves the tab with the link into a separate row.

How can I include a link and maintain the placement of the tab in the same row as any other tabs that don't contain links?

Here is my minimalistic code:

library(shiny)

ui <- navbarPage(
  title = "", 
  id = "navbar",
  header = "",
  
  tabsetPanel(id="tabs", 
              
              tabPanel(
                title = "Tab1", value = "tab1"
              ),
              
              tabPanel(
                title = a("Tab2",
                          href = "https://www.google.com/"),
                value = "tab2"
              )
  )
)

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

shinyApp(ui, server)

I have tried using the HTML function to see if that for some reason gives a different result, but as expected it didn't:

tabPanel(
                title = HTML("<a href = 'https://www.google.com/'>tab2</a>"),
                value = "tab2"
              )

I would really appreciate your advice! If you also happen to have any idea on how to remove the title row from the navbarPage, that would also be much appreciated.

Answer 1

If you look at the HTML for your tabs, you can see that the tabs themselves already have a <a href ...> tag. So what you're doing is adding another one below the existing one.

A work-around is to do something like

1. Observe when Tab2 is pressed
2. Navigate to the URL

library(shiny)

ui <- navbarPage(
  title = "", 
  id = "navbar",
  header = "",
  tabsetPanel(
    id = "tabs",
    tabPanel(title = "Tab1"),
    tabPanel(title = "Tab2")
  ) 
)

server <- function(input, output, session) {
  
  observeEvent(input$tabs, {
    print(input$tabs)
    
    if( input$tabs == "Tab2" ) {
      browseURL("https://www.google.com/")
    }
  })
  
}

shinyApp(ui, server)

Answer 2

One way to do this, is to use a javascript function to do the linking for us. Then we do not need to include <a href> inside the tab which is already a link!.

We can easily set up a Js function with {shinyjs} and extendShinyjs(). Then we call it in an observeEvent() when the tab is clicked.

library(shiny)
library(shinyjs)

ui <- navbarPage(
  
  # use shinyjs
  useShinyjs(), 
  
  # write JS function to open window
  shinyjs::extendShinyjs(text = "shinyjs.myfun = function() { window.open('https://www.google.com/', '_self'); }",
                         functions = c("myfun")), 
  title = "", 
  id = "navbar",
  header = "",
  
  tabsetPanel(id="tabs", 
              
              tabPanel(
                title = "Tab1", value = "tab1"
              ),
              
              tabPanel(
                title = "Tab2",
                value = "tab2"
              )
  )
)

server <- function(input, output, session) {
  
  # use observeEvent to check if user clicks tab no 2 
  observeEvent(input$tabs,
    {
      if (input$tabs == "tab2") {
      shinyjs::js$myfun()
    }
  })
  
}

shinyApp(ui, server)