Search code examples
rtabsshinyswitchingshinyjs

Disable walking between tabs Shiny


I have shiny application with several tabs. The problem is that I want to walk between tabs with button, not by clicking on the tab. How I can disable clicking on tabs? Small example of code:

ui <- navbarPage('Test App', id = "inTabset",
                 tabPanel(title = "Panel 1", value = "panel1", 
                          actionButton('jumpToP2', 'Jump to Secon Tab')),
                 tabPanel(title = "Panel 2", value = "panel2", 
                          actionButton('jumpToP1', 'Jump to First Tab'))
)

server <- function(input, output, session) {
  observeEvent(input$jumpToP2, {
    updateTabsetPanel(session, "inTabset",
                      selected = "panel2")
  })

  observeEvent(input$jumpToP1, {
    updateTabsetPanel(session, "inTabset",
                      selected = "panel1")
  })

}

shinyApp(ui, server)

Solution

  • Here is a possible workaround. We can use shinyjs to disable the navbar buttons, and add some CSS to change the cursor to default when hovering the navigation bar.

    There may be simpler ways that I am not aware of, so I am curious to see other possible solution approaches :) Hope this helps!

    library(shiny)
    library(shinyjs)
    
    ui <- navbarPage('Test App', id = "inTabset",
                     tabPanel(title = "Panel 1", value = "panel1", 
                              actionButton('jumpToP2', 'Jump to Secon Tab')),
                     tabPanel(title = "Panel 2", value = "panel2", 
                              actionButton('jumpToP1', 'Jump to First Tab')),
                     useShinyjs(),
                     tags$head(tags$style(HTML('.navbar-nav a {cursor: default}')))
    )
    
    server <- function(input, output, session) {
    
      shinyjs::disable(selector = '.navbar-nav a')
    
      observeEvent(input$jumpToP2, {
        updateTabsetPanel(session, "inTabset",
                          selected = "panel2")
      })
    
      observeEvent(input$jumpToP1, {
        updateTabsetPanel(session, "inTabset",
                          selected = "panel1")
      })
    
    }
    
    shinyApp(ui, server)