Show content for menuItem when menuSubItems exist in Shiny Dashboard

Question

Is there a way of actually showing content in the content pane of a Shiny Dashboard for a menuItem with existing menuSubItems. In the example: I tried to add \"tabName = \"c

Answer 1

Much credit goes to this question React to menuItem() tab selection . The only annoying thing is that you would have to click on the Charts tab again but I think that should be fine

library(shiny)
library(shinydashboard)

convertMenuItem <- function(mi,tabName) {
  mi$children[[1]]$attribs['data-toggle']="tab"
  mi$children[[1]]$attribs['data-value'] = tabName
  if(length(mi$attribs$class)>0 && mi$attribs$class=="treeview"){
    mi$attribs$class=NULL
  }
  mi
}

header <- dashboardHeader()

sidebar <- dashboardSidebar(
  sidebarUserPanel("Pork Chop",
                   subtitle = a(href = "#", icon("circle", class = "text-success"), "Online"),
                   # Image file should be in www/ subdir
                   image = "https://vignette.wikia.nocookie.net/fanfictiondisney/images/9/9e/Pumba_3.jpg/revision/latest?cb=20120708163413"
  ),
  sidebarSearchForm(label = "Enter a number", "searchText", "searchButton"),
  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", badgeLabel = "new", badgeColor = "green"),
    convertMenuItem(menuItem("Charts", tabName = "charts",icon = icon("bar-chart-o"),selected=T,
             menuSubItem("Sub-item 1", tabName = "subitem1"),
             menuSubItem("Sub-item 2", tabName = "subitem2")),"charts")
  )
)

body <- dashboardBody(
  tabItems(
    tabItem("dashboard",div(p("Dashboard tab content"))),
    tabItem("widgets","Widgets tab content"),
    tabItem("charts","Charts Tab"),
    tabItem("subitem1","Sub-item 1 tab content"),
    tabItem("subitem2","Sub-item 2 tab content")
  )
)

shinyApp(
  ui = dashboardPage(header, sidebar, body),
  server = function(input, output) { }
)

Answer 2

Coming from here. This is an alternative approach showing a hidden menuItem once the childful menuItem is expanded.

Two advantages over @PorkChop's current solution are, that input$sidebarItemExpanded remains functional (doesn't get updated when using convertMenuItem) and there is no second click needed to expand the menu.

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(), 
  dashboardSidebar(
    sidebarMenu(
      id = "sidebarID",
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", icon = icon("th"), tabName = "widgets"),
      menuItem("Charts", id = "chartsID", tabName = "charts", icon = icon("bar-chart-o"), expandedName = "CHARTS",
                               menuSubItem("Sub-item 1", tabName = "subitem1"),
                               menuSubItem("Sub-item 2", tabName = "subitem2")
      ),
      hidden(menuItem("hiddenCharts", tabName = "hiddenCharts"))
    )
  ),
  dashboardBody(
    useShinyjs(),
    tabItems(
      tabItem("dashboard", "Dashboard tab content"),
      tabItem("widgets", "Widgets tab content"),
      tabItem("hiddenCharts", "Charts Tab"),
      tabItem("subitem1", "Sub-item 1 tab content"),
      tabItem("subitem2", "Sub-item 2 tab content") 
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$sidebarItemExpanded, {
    if(input$sidebarItemExpanded == "CHARTS"){
      updateTabItems(session, "sidebarID", selected = "hiddenCharts")
    }
  })
}

shinyApp(ui, server)