How do I link a box on the home tab to another tab in shiny app?

[ML_Rookie_2021]

Cross-posted (FAQ: Is it OK if I cross-post?) at

How do I link a box on the home tab to another tab in shiny app?

---

Reproducible code below. I have a shiny app with several tabs, including a "Home" tab. On the Home tab, I would like to include a box with a link to "Tab 2". Meaning when the box is clicked, it takes the user to Tab 2. Additionally, I would also love to have the box do some sort of highlight when a user hovers over it in order to make it easier to recognize that the box is a hyperlink to something. How do I make this work?

library(tidyverse)
library(DT)
library(shiny)
library(shinydashboard)
library(shinyWidgets)


ui <- navbarPage(
    useShinydashboard(),
    
    tabPanel(
        title = "Home",
        
        box(
            title = "Box to link to tab2",
            status = "primary",
            width = 3
        )
    ),
    
    tabPanel(
        title = "Tab 1"
    ),
    
    tabPanel(
        title = "Tab 2",
        dataTableOutput("mtcars_table")
    )
    
    

)

server <- function(input, output) {
    
    output$mtcars_table <- DT::renderDataTable({mtcars})

    
}

shinyApp(ui, server)

[scottyd22]

Below is one way to accomplish this using shinyjs to handle clicking on the box and adding CSS to handle highlighting the box on hover.

library(tidyverse)
library(DT)
library(shiny)
library(shinydashboard)
library(shinyWidgets)
library(shinyjs)

ui <- navbarPage(
  id = 'navbarID', # give navbarPage an ID
  useShinyjs(),
  useShinydashboard(),
  
  # add CSS for hover action
  tags$style(
    '.box:hover {
       background-color: lightblue;
    }'),
  
  tabPanel(
    title = "Home",
    uiOutput('box')
  ),
  
  tabPanel(
    inputID = 'tab1id',
    title = "Tab 1"
  ),
  
  tabPanel(
    id = 'tab2id',
    title = "Tab 2",
    dataTableOutput("mtcars_table")
  )
)

server <- function(input, output, session) {
  
  output$mtcars_table <- DT::renderDataTable({mtcars})
  
  output$box = renderUI({
    div(id = 'boxID', # give the box an ID
        box(
          title = "Box to link to tab2",
          status = "primary",
          width = 3
          )
        )
  })
  
  # update tab when box is clicked
  observe({
    onclick('boxID', 
            updateTabItems(session, inputId = 'navbarID', selected = 'Tab 2'))
  })
}

shinyApp(ui, server)