禁用shinydashboard头部后，如何将侧边栏菜单移至顶部？

问题场景：禁用dashboardHeader后，侧边栏的sidebarMenu默认存在顶部间距，导致首个菜单项位置偏下，需要将其移至侧边栏绝对顶部。

实现方法 #

通过自定义CSS移除侧边栏和菜单的默认顶部间距即可，具体代码如下：

ui <- shinydashboard::dashboardPage(
  shinydashboard::dashboardHeader(disable = TRUE),
  shinydashboard::dashboardSidebar(
    # 添加自定义CSS样式
    tags$head(
      tags$style(HTML("
        /* 移除侧边栏顶部内边距 */
        .main-sidebar {
          padding-top: 0 !important;
        }
        /* 移除菜单顶部外边距 */
        .sidebar-menu {
          margin-top: 0 !important;
        }
      "))
    ),
    sidebarMenu(
      menuItem("Home", tabName = "home", icon = icon("house"))
    )
  ),
  shinydashboard::dashboardBody(
    shinydashboard::tabBox(
      title = "title",
      shiny::tabPanel(
        "test panel"
      )
    )
  )
)

server <- function(input, output, session) {
}

shiny::shinyApp(ui, server)

样式说明 #

• .main-sidebar：shinydashboard的侧边栏容器默认带padding-top属性，设为0即可消除顶部空白
• .sidebar-menu：菜单容器默认带有margin-top，设为0让菜单紧贴侧边栏顶部
• 加!important是为了确保自定义样式优先级高于框架默认样式

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