Search code examples
rshinynavbartitlebarclickable

Can I make the navbar title into its own clickable page in shiny?


My apologies if this already exists, but the only post that appears to ask this that I could find is this one: Clickable Navbar title and it seems to be somehow iPhone related...

I am building a shinyApp using the navbar layout. It basically follows the standard format:

navbarPage("Title",
  tabPanel("tab1"),
  tabPanel("tab2"),
  tabPanel("tab3")
)

The title to the left kind of looks like its own tab - it highlights when the cursor moves over it, much like the other tabs, but with bigger text. That's a little weird, because it creates the illusion that the title can be clicked on, when it can't.

What I would like to do is to make it so that this is indeed the case, and to be able to click on the title and be led onto a "landing page" which doesn't exist anywhere else. Essentially I want the title panel to be its own page.

Does anyone have any suggestions on how to achieve this? (I've tried creating a separate tab panel that has no title to try and lead onto, but a) I don't know how to make the title clickable to lead onto it and b) it's not really invisible - I have to put in "" as the title as otherwise the first line of text appears instead, and I don't want that. I've also considered removing the title from the navbar page itself and instead creating an additional tab, but that loses the element of the title font size being much larger than that of the other tabs.)


Solution

  • You can resize the font of the first tab to look like the title by using css as suggested by A. Suliman on this thread (How to change the display attributes of SPECIFIC tabs when using tabPanel in navbarPage). There is also a nice suggestion to use an icon. Here is a reproducible code (with a home icon):

    library(shiny)
    
    ui <-  fluidPage(tags$style(
      type = 'text/css',
      # add the name of the tab you want to use as title in data-value
      HTML(
        ".container-fluid > .nav > li >
                            a[data-value='Title'] {font-size: 20px}"
      )
    ),
    
    navbarPage(
      "",
      # blank title
      tabPanel("Title" , icon = icon("home")), # Font Awesome icon
      tabPanel("table 1"),
      tabPanel("table 2")
    ))
    
    server <- function(input, output) {
      
    }
    shinyApp(ui, server)
    

    Here is how it is going to look like.