Search code examples
rshinyshinydashboard

How do i include input widgets under menuSubItem in shiny dashboard sidebar?


How is it possible to include a control widget under the menuSubItem in the sidebar of a shiny app?

This is my trial:

library(shiny)
library(shinyWidgets)
library(shinydashboard)

ui <- dashboardPage(
  
  ### Header -----
  
  dashboardHeader(title = "Example App"),
  
  ### Sidebar -----
  
  dashboardSidebar(
    
    sidebarMenu(
              
      menuItem(
        text = "A",
        tabName = "analytics",
        icon = icon("signal"),
        startExpanded = TRUE,
        
        menuSubItem(text = "a",
                    icon = NULL,
                    
                    pickerInput(
                      inputId = "Id086",
                      label = "Placeholder", 
                      choices = c("a", "b", "c", "d"),
                      options = list(
                        title = "This is a placeholder")
                    )
                    ),
        
        
        menuSubItem(text = "b",
                    icon = NULL)
        
        
      )
      
    )
    
  ),
  
  dashboardBody(
    
  )
  
)

## Server-function -----

server <- function(input, output) {
  
  
}

# Run the application 
shinyApp(ui = ui, server = server)

However, the desired input does not appear within the app. I managed it to include the input widget under any of the menu items but i failed to make it appear under menuSubItems.


Solution

  • menuSubItems are intended to navigate tabItems in the body - that is why they can't have child elements.

    You can use nested menuItems to place additional inputs in the sidebar (please see the below example) which "behave" differently when childfull / childless.

    When a menuItem is childfull it accepts the parameters expandedName and startExpanded.

    When a menuItem is childless it accepts the parameters tabName and selected.

    A menuSubItem is always childless.

    library(shiny)
    library(shinyWidgets)
    library(shinydashboard)
    
    ui <- dashboardPage(
      dashboardHeader(title = "Example App"),
      dashboardSidebar(sidebarMenu(
        menuItem(
          text = "A",
          # tabName = "analytics", # childfull menuItems ignore the tabName parameter they use expandedName instead
          icon = icon("signal"),
          startExpanded = TRUE,
          menuItem(
            text = "a",
            menuSubItem(
              text = "a1",
              tabName = "tab_a1",
              icon = NULL
            ),
            pickerInput(
              inputId = "Id086",
              label = "Placeholder",
              choices = c("a", "b", "c", "d"),
              options = list(title = "This is a placeholder")
            ),
            icon = NULL,
            startExpanded = TRUE
          ),
          menuSubItem(
            text = "b",
            tabName = "tab_b",
            icon = NULL
          )
        )
      )),
      dashboardBody(tabItems(
        tabItem(tabName = "tab_a1",
                h2("tab_a1 content")),
        tabItem(tabName = "tab_b",
                h2("tab_b content"))
      ))
    )
    
    server <- function(input, output) {
    }
    
    shinyApp(ui = ui, server = server)
    

    Here you can find a related question.

    However, personally I'd recommend using shinydashboardPlus's right sidebar for inputs and use the left sidebar only for navigation.