Shiny dashboard点击menuItem时自动预选中首个menuSubItem如何实现

实现逻辑 #

• 为sidebarMenu设置唯一id，用于服务端监听菜单选中事件
• 移除父级menuItem的tabName属性，避免点击父菜单时触发无效的tab跳转
• 服务端监听菜单选中值变化，当识别到选中项为父菜单时，主动切换到该父菜单下第一个子菜单对应的tab页

完整实现代码 #

library(shinydashboard)
library(shiny)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
    # 给侧边栏菜单加id，用于监听选中事件
    sidebarMenu(id = "sidebar_menu",
      # 父级menuItem移除tabName属性
      menuItem("Table1" , icon = icon("table"), startExpanded = F,
               menuSubItem("sub menu1", tabName = "subMenu1"),
               menuSubItem("sub menu2", tabName = "subMenu2")
               ),
      menuItem("Table2" , icon = icon("table"), startExpanded = F,
               menuSubItem("sub menu3", tabName = "subMenu3"),
               menuSubItem("sub menu4", tabName = "subMenu4")
               )
      )),
  
  dashboardBody(
    tabItems(
      # 移除父菜单对应的冗余tabItem
      tabItem(tabName = "subMenu1",
              h2("First tab")
      ),
      tabItem(tabName = "subMenu2",
              h2("Second tab")
      ),
      tabItem(tabName = "subMenu3", 
              h2("Third tab")
      ),
      tabItem(tabName = "subMenu4", 
              h2("Fourth tab")
      )
    )))

server <- function(input, output, session) {
  # 监听侧边栏选中变化
  observeEvent(input$sidebar_menu, {
    # 匹配父菜单，切换到对应第一个子菜单
    if(input$sidebar_menu == "Table1"){
      updateTabItems(session, "sidebar_menu", selected = "subMenu1")
    }
    if(input$sidebar_menu == "Table2"){
      updateTabItems(session, "sidebar_menu", selected = "subMenu3")
    }
  })
}
shinyApp(ui, server)

效果说明 #

点击任意父级menuItem时，会自动展开子菜单列表，同时预选中第一个子菜单、加载对应tab内容，父菜单也会保持高亮激活状态，完全符合需求。

内容的提问来源于stack exchange，提问作者volfi