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.

Radke

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)

Tedium

This solution is much simpler than my own +1! – Bronnie

yours is good for showing how you can get more fine-tuned control, and how to add custom functions. – Tedium

I like both solutions, and learned from both! – Poussette

Thanks so much SymbolixAU and @TimTeaFan. Both of your solutions are great! I really appreciate your help! – Radke

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)

Bronnie