R Shinydashboard submenuitems using same UI

Question

I have a basic app with a MenuItem that when clicked displays a plot of a specific variable. The variable can be chosen from a SelectInput in the UI for this MenuItem.

However, what I'd really like to do is to have the possible variables be displayed as subMenuItems of the original MenuItem, so that when one is clicked it grabs the currently selected variable and renders the plot. This looks visually neater to me than using a SelectInput dropdown.

I was trying to get this working by having each tabItem link to the same uiOutput that displays the appropriate content, but Shiny doesn't seem to like having multiple tabs with the same output. Is there any way to achieve this functionality?

Code example that doesn't work:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
    dashboardHeader(), 
    dashboardSidebar(
        sidebarMenuOutput("menu"),
        textOutput("res")
    ),
    dashboardBody(
        tabItems(
            tabItem("dashboard", "Dashboard tab content"),
            tabItem("widgets", "Widgets tab content"),
            tabItem("chartsHome", "Main charts content"),
            tabItem("subitem1", uiOutput("chart")),
            tabItem("subitem2", uiOutput("chart")) 
        )
    )
)

server <- function(input, output, session) {
    output$res <- renderText({
        paste("You've selected:", input$tabs)
    })
    output$menu <- renderMenu({
        sidebarMenu(
            # Setting id makes input$tabs give the tabName of currently-selected tab
            id = "tabs",

            menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
            menuItem("Widgets", icon = icon("th"), tabName = "widgets"),
            menuItem("Charts", icon = icon("bar-chart-o"), tabName="chartsHome",
                     menuSubItem("Sub-item 1", tabName = "subitem1"),
                     menuSubItem("Sub-item 2", tabName = "subitem2")
            )
        )
    })

    output$chart <- renderUI({
        if (input$tabs == "subitem1") {
            HTML("Chart with first variable as output")
        } else if (input$tabs == "subitem2") {
            HTML("Chart with second variable as output")
        }
    })


}


shinyApp(ui, server)

Answer 1

You can't have duplicate IDs, they have to be unique. You can investigate these yourself by right clicking on the page and then inspect, click on console and you will see the errors. For you its Uncaught Duplicate binding for ID chart

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(), 
  dashboardSidebar(
    sidebarMenuOutput("menu"),
    textOutput("res")
  ),
  dashboardBody(
    tabItems(
      tabItem("dashboard", "Dashboard tab content"),
      tabItem("widgets", "Widgets tab content"),
      tabItem("chartsHome", "Main charts content"),
      tabItem("subitem1", uiOutput("chart")),
      tabItem("subitem2", uiOutput("chart2")) 
    )
  )
)

server <- function(input, output, session) {
  output$res <- renderText({
    paste("You've selected:", input$tabs)
  })
  output$menu <- renderMenu({
    sidebarMenu(
      # Setting id makes input$tabs give the tabName of currently-selected tab
      id = "tabs",

      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", icon = icon("th"), tabName = "widgets"),
      menuItem("Charts", icon = icon("bar-chart-o"), tabName="chartsHome",
               menuSubItem("Sub-item 1", tabName = "subitem1"),
               menuSubItem("Sub-item 2", tabName = "subitem2")
      )
    )
  })

  toRender <- reactive({
    if (input$tabs == "subitem1") {
      HTML("Chart with first variable as output")
    } 
    else if (input$tabs == "subitem2") {
      HTML("Chart with second variable as output")
    }
    else{
      return()
    }
  })

  output$chart <- renderUI({
    toRender()
  })

  output$chart2 <- renderUI({
    toRender()
  })

}


shinyApp(ui, server)