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)