Tabs of the menuItem, in Shinydashboard, not working when put items inside

Question

Lets take the example of the reference: https://rstudio.github.io/shinydashboard/structure.html#sidebar-menu-items-and-tabs. When put more items in the menuItem(), your associate tab don't works anymore. I tried in this simple modification in example below and just shown the widgets' tab:

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Dashboard",
             tabName = "dashboard",
             icon = icon("dashboard"),
             selected = TRUE,
             startExpanded = TRUE,
             numericInput("num1",
                          "Put the First Number",
                          value = 1,
                          min = 0),
             numericInput("num2",
                          "Put the Second Number",
                          value = 1,
                          min = 0)
             ),
    
    menuItem("Widgets",
             icon = icon("th"),
             tabName = "widgets")
  )
)

body <- dashboardBody(
  tabItems(
    tabItem(tabName = "dashboard",
            h2("Dashboard tab content"),
            fluidRow(
              valueBoxOutput("box1", width = 6),
              valueBoxOutput("box2", width = 6)
            )
    ),
    
    tabItem(tabName = "widgets",
            h2("Widgets tab content")
    )
  )
)

# Put them together into a dashboardPage
ui <- dashboardPage(
  skin = "green",
  dashboardHeader(title = "Example"),
  sidebar,
  body
)

server <- function(input, output){
  
  output$box1 <- renderValueBox({
    valueBox(input$num1,
             "First Number",
             color = "aqua",
             icon = icon("chart-line"))
  })
  output$box2 <- renderValueBox({
    valueBox(input$num2,
             "Second Number",
             color = "aqua",
             icon = icon("chart-line"))
  })

}

shinyApp(ui, server)

Answer 1

That is because childfull menuItem behaves differently as noted here. Therefore, you need to define a menuItem or a menSubItem within that dashboard page so that your desired content can be displayed.

Try this

  sidebarMenu(id = "tabs",
    menuItem("Dashboard",
             tabName = "dashboard",
             icon = icon("tachometer-alt"),
             selected = TRUE,
             startExpanded = TRUE,
             #icon = icon(fontawesome:::fa_tbl[[1]][505]),
             menuItem("Sub-item 1", tabName = "subitem1"),
             ### menuSubItem("Sub-item 1", tabName = "subitem1"),  ## it can be menuSubItem instead of menuItem
             numericInput("num1",
                          "Put the First Number",
                          value = 1,
                          min = 0),
             numericInput("num2",
                          "Put the Second Number",
                          value = 2,
                          min = 0)
    ),
    
    menuItem("Widgets",
             icon = icon("th"),
             tabName = "widgets")
  )
)

body <- shinydashboard::dashboardBody(
  tabItems(
    tabItem(tabName = "subitem1",
            h2("Sub item1 tab content in Dashboard"),
            fluidRow(
              valueBoxOutput("box1", width = 6),
              valueBoxOutput("box2", width = 6)
            )
    ),
    
    tabItem(tabName = "widgets",
            h2("Widgets tab content")
    )
  )
)

# Put them together into a dashboardPage
ui <- shinydashboard::dashboardPage(
  skin = "green",
  shinydashboard::dashboardHeader(title = "Example"),
  sidebar,
  body
)

server <- function(input, output, session){
  
  output$box1 <- renderValueBox({
    valueBox(input$num1,
             "First Number",
             color = "aqua",
             icon = icon("chart-line"))
  })
  output$box2 <- renderValueBox({
    valueBox(input$num2,
             "Second Number",
             color = "aqua",
             icon = icon("chart-line"))
  })
  observe({print(input$tabs)})
}

shinyApp(ui, server)