shinydashboard: menuSubItem not rendering at start in case of several menuSubItems

Question

I found that menuSubItem content is not rendering in case of several (more than one) tabItems.

Minimal example demonstrating this behavior is below.

The desired behavior is to show content of the tabItem marked as selected = TRUE on startup. Now, the content shows up only after switching between menuSubItems in the sidebar.

How can I make it work?

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "MINIMAL EXAMPLE"),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody(
    uiOutput("body")
  )
)

server <- function(input, output, session) {

  output$menu <- renderMenu(
    sidebarMenu(
        menuItem(text = "TABS", tabName = "TABS", startExpanded = T,
                 menuSubItem(text = "tab1", tabName="tab1",
                             icon = icon("cube"), selected = TRUE),
                 menuSubItem(text = "tab2", tabName="tab2",
                             icon = icon("cube"), selected = FALSE)
        )
   )
  )

  output$body <- renderUI({
    tabItems(
      tabItem(tabName = "tab1", 
              h4("MY TEXT 1")
      ),
      tabItem(tabName = "tab2", 
              h4("MY TEXT 2")
      ))
  })
}

shinyApp(ui = ui, server = server)

Answer 1

Indeed, putting ui elements directly in UI solves it. But the approach of putting everything inside ui is limited to situations that do not involve using reactive values. As I understand passing reactive value from server to ui is not possible in general (or limited to special cases). Please correct if I am wrong... Thanks

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "MINIMAL EXAMPLE"),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "tab1", 
              h4("MY TEXT 1")
      ),
      tabItem(tabName = "tab2", 
              h4("MY TEXT 2")
      ))
  )
)

server <- function(input, output, session) {

  output$menu <- renderMenu(
    sidebarMenu(
        menuItem(text = "TABS", tabName = "TABS", startExpanded = T,
                 menuSubItem(text = "tab1", tabName="tab1",
                             icon = icon("cube"), selected = TRUE),
                 menuSubItem(text = "tab2", tabName="tab2",
                             icon = icon("cube"), selected = FALSE)
        )
    )
  )
}

shinyApp(ui = ui, server = server)

Answer 2

Renaming your output to something other than "body" helps - please see this .

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "MINIMAL EXAMPLE"),
  dashboardSidebar(
    sidebarMenuOutput("menu")
  ),
  dashboardBody(
    uiOutput("myBodyOutput")
  )
)

server <- function(input, output, session) {
  
  output$myBodyOutput <- renderUI({
    tabItems(
      tabItem(tabName = "tab1", 
              h4("MY TEXT 1")
      ),
      tabItem(tabName = "tab2", 
              h4("MY TEXT 2")
      ))
  })
  
  output$menu <- renderMenu(
    sidebarMenu(id = "sidebarID",
                menuItem(text = "TABS", tabName = "TABS", startExpanded = T,
                         menuSubItem(text = "tab1", tabName="tab1",
                                     icon = icon("cube"), selected = TRUE),
                         menuSubItem(text = "tab2", tabName="tab2",
                                     icon = icon("cube"), selected = FALSE)
                )
    )
  )
  
}

shinyApp(ui = ui, server = server)