R Shiny技术问题：如何缩小侧边栏菜单子项的字体大小

你遇到的这个情况很常见，.main-sidebar这个CSS选择器只能覆盖侧边栏的整体容器样式，但子菜单（menuSubItem）有自己独立的CSS类，所以单独设置它不会影响到子菜单的字体。咱们只需要针对子菜单对应的CSS选择器补充样式就行。

解决方案 #

调整你的tags$style代码，同时覆盖主菜单和子菜单的字体样式：

tags$style(HTML("
  /* 调整主菜单字体大小 */
  .sidebar-menu > li > a {
    font-size: 12px;
  }
  /* 调整子菜单字体大小 */
  .treeview-menu > li > a {
    font-size: 11px; /* 可选：设置比主菜单稍小的字号，增强层级感 */
  }
"))

修改后的完整可运行代码 #

library(shiny)
library(shinydashboard)

# 补充测试数据（原代码中未定义tabledata，这里添加避免运行报错）
tabledata <- data.frame(
  序号 = 1:5,
  内容 = letters[1:5]
)

header <- dashboardHeader(
  title = "Test Dashboard"
)

sidebar <- dashboardSidebar(
  sidebarMenu (
    menuItem("Test", startExpanded = TRUE,
             menuSubItem("Dashboard", tabName = "tab"),
             menuSubItem("Link")
    )
  )
)

body <- dashboardBody(
  tags$style(HTML("
    /* 调整主菜单字体大小 */
    .sidebar-menu > li > a {
      font-size: 12px;
    }
    /* 调整子菜单字体大小 */
    .treeview-menu > li > a {
      font-size: 11px;
    }
  ")),
  tabItems(
    tabItem(tabName = "tab",
            box(title = "Table", width = 10, status = "warning",
                DT::dataTableOutput("table"))
    )
  )
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) {
  output$table = DT::renderDataTable({
    DT::datatable(tabledata)
  })
}

shiny::shinyApp(ui, server)

简单说明 #

• .sidebar-menu > li > a 对应主菜单（menuItem）的链接元素，设置它的字体大小就能改变主菜单文字大小。
• .treeview-menu > li > a 对应展开后的子菜单（menuSubItem）的链接元素，单独设置这个选择器就能精准调整子菜单的字体。
• 你可以根据需求随意修改font-size的数值，比如把主菜单设为12px，子菜单设为11px，这样侧边栏的层级关系会更清晰。

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