In Shiny how can I click in a menuItem and show the subItems options on the body?

Question

This is my {shinydashboard}:

library(shiny)
library(shinydashboard)


ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    "User Name",
    subtitle = a(href = "#", icon("circle", class = "text-success"), "Online"),

    sidebarMenu(
      id = "tabs",

      menuItem(

        "Dashboard",
        tabName = "dashboard",
        icon = icon("dashboard"),
        menuSubItem(
          "Widgets",
          icon = icon("th"),
          tabName = "widgets"
        ),
        menuSubItem(
          "Charts",
          icon = icon("th"),
          tabName = "charts"
        )
      ))),

  dashboardBody(

    tabItems(
      tabItem("dashboard",
              tags$button(

                h1('This button takes me to the Widgets Panel')),
              br(),
              br(),
              tags$button(h1('This button takes me to the Charts Panel'))
              ))))


server = function(input, output) {

}

shinyApp(ui, server)

The idea is to click on 'Dashboard' Menu and then on the body I have a link or button that takes me to the 'Widgets' or 'Charts' Panels.

Once I click on those buttons/links OR click on the Sub Menus of 'Dashboard' menu these actions will take me to their Panels.

So, how can I add the buttons and links that take me to the panels of my Menu SubItems?

And how can I add the buttons and links on the body of my Shiny Dashboard?

Any help would me amazing.

Answer 1

Your question is the result of a common misunderstanding regarding shinydashboard's structure.

Childfull menuItems (like your "Dashboard" menuItem) don't have a corresponding tabItem.

The only usecase for a childfull menuItem is to expand on click and present its children (no visual change in the body - only in the sidebar).

Accordingly in your above code the tabName = "dashboard" parameter is ignored and the tabItem("dashboard", ...) isn't displayed.

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

• When a menuItem is childless it accepts the parameters tabName and selected (just like menuSubItem which always is childless).

Please read the small print.

Also check my related answers here and here.

However, there are unofficial workarounds to have a childfull menuItem display a tabItem - I don't recommend to use them.

To navigate your tabs programmatically use updateTabItems:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  header = dashboardHeader(),
  sidebar = dashboardSidebar(
    sidebarUserPanel(name = "User Name",
                     subtitle = a(href = "#", icon("circle", class = "text-success"), "Online"),
                     image = NULL),
    sidebarMenu(
      id = "tabs",
      menuItem(
        "Dashboard",
        menuSubItem("Widgets",
                    icon = icon("th"),
                    tabName = "widgets"),
        menuSubItem("Charts",
                    icon = icon("th"),
                    tabName = "charts"),
        icon = icon("dashboard"),
        expandedName = "dashboard",
        startExpanded = TRUE
      )
    )
  ),
  body = dashboardBody(
    tabItems(
      tabItem("widgets", actionButton("goCharts", "Go to Charts tab")),
      tabItem("charts", actionButton("goWidgets", "Go to Widgets tab"))
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$goCharts, {
    updateTabItems(session, inputId = "tabs", selected = "charts")
  })
  observeEvent(input$goWidgets, {
    updateTabItems(session, inputId = "tabs", selected = "widgets")
  })
}

shinyApp(ui, server)