如何移除R Shiny（shinydashboard）应用中多余的绿色导航栏？

问题描述 #

我正在开发一个使用shinydashboard的R Shiny应用，当前界面出现了两个导航栏。我希望保留红色导航栏，移除其下方的绿色导航栏，请问该如何实现？

界面截图：

相关代码 #

app_ui <- function(request) {
  tagList(
    # Leave this function for adding external resources
    golem_add_external_resources(),
    
    shiny::fluidPage(
      theme = shinythemes::shinytheme("united"),
      
      tags$head(tags$style(".navbar {margin-bottom: 0px;}")),
      
      tags$head(
        tags$style(".container-fluid {padding-right: 0px; padding-left: 0px;}")
      ),
    
    # Your application UI logic
    # shinyUI(
      # navbarPage(
        navbarPage(
          title = div(
            img(src = "www/bftb_logo_v8_bare.png", height = "30px"),
            "AZ Oncology Bioinformatics Toolbox"
          ),
          windowTitle = "BFTB Landing Page",
        
        # windowTitle = "BFTB Landing Page",
        # title = div(img(src = "www/bftb_logo_v8_bare.png", height = "30px"), "AZ Oncology Bioinformatics Toolbox"),
        # theme = shinythemes::shinytheme("cerulean"),
        tabPanel("Toolbox", icon = icon("wrench"),
                 shinydashboard::dashboardPage(
                   header = NULL,
                  # header = shinydashboard::dashboardHeader(title = "   ", titleWidth = 300),
                   shinydashboard::dashboardSidebar(
                     width = 300 ,
                     shinydashboard::sidebarMenu(
                       shinydashboard::menuItem(
                         "Tools",
                         tabName = "tools_app",
                         icon = icon("wrench"),
                         shinydashboard::menuSubItem(
                           "Gene Expression/Signature/Pathways",
                           tabName = "gene_app",
                           icon = icon("chart-line")
                         ),
                         shinydashboard::menuSubItem(
                           "Genomic",
                           tabName = "genomic_app",
                           icon = icon("universal-access")
                         ),
                         shinydashboard::menuSubItem(
                           "Epigenetics",
                           tabName = "epi_app",
                           icon = icon("chart-bar")
                         ),
                         shinydashboard::menuSubItem(
                           "Immune-oncology",
                           tabName = "io_app",
                           icon = icon("heartbeat")
                         ),
                         shinydashboard::menuSubItem(
                           "Pharmacology",
                           tabName = "pharm_app",
                           icon = icon("plus-square")
                         ),
                         shinydashboard::menuSubItem(
                           "Cell line Selection",
                           tabName = "cell_app",
                           icon = icon("sellcast")
                         ),
                         shinydashboard::menuSubItem("Mouse",
                                                     tabName = "mouse_app",
                                                     icon = icon("paw")),
                         shinydashboard::menuSubItem(
                           "Haem Oncology",
                           tabName = "hemebase_app",
                           icon = icon("h-square")
                         ),
                         shinydashboard::menuSubItem("Multiomics",
                                                     tabName = "multiomics_app",
                                                     icon = icon("list")),
                         shinydashboard::menuSubItem(
                           "Other",
                           tabName = "other_app",
                           icon = icon("option-horizontal", lib = "glyphicon"))
                       )
                     )
                   ),
                   shinydashboard::dashboardBody(
                     shinydashboard::tabItems(
                       shinydashboard::tabItem("tools_app", mod_tools_path_ui("tools_path_ui_1")),
                       shinydashboard::tabItem("gene_app",mod_gene_expressions_sign_path_ui("gene_expression_sign_path_ui_1")),
                       shinydashboard::tabItem("genomic_app", mod_genomic_ui("genomic_ui_1")),
                       shinydashboard::tabItem("epi_app", mod_epi_ui("epi_ui_1")),
                       shinydashboard::tabItem("io_app", mod_io_ui("io_ui_1")),
                       shinydashboard::tabItem("pharm_app", mod_pharm_ui("pharm_ui_1")),
                       shinydashboard::tabItem("cell_app", mod_cell_ui("cell_ui_1")),
                       shinydashboard::tabItem("mouse_app", mod_mouse_ui("mouse_ui_1")),
                       shinydashboard::tabItem("hemebase_app", mod_hemebase_ui("hemebase_ui_1")),
                       shinydashboard::tabItem("multiomics_app", mod_multiomics_ui("multiomics_ui_1")),
                       shinydashboard::tabItem("other_app", mod_other_ui("other_ui_1"))))
                 )),
        shiny::tabPanel("Tutorials", icon = icon("graduation-cap"),mod_tutorials_ui("mod_tutorials_ui_1")),
        shiny::tabPanel("Workflows", icon = icon("list"), mod_workflows_ui("mod_workflows_ui_1")), 
        br(),
        br(),
        br()
      )
    ), # tags$footer("footer_app", mod_footer_ui("mod_footer_ui_1")
    tags$footer(mod_footer_ui("mod_footer_ui_1"))
  )
  # )

}

问题原因 #

你在navbarPage的tabPanel里嵌套了dashboardPage，而shinydashboard的dashboardPage默认会生成一个顶部导航栏（即你看到的绿色导航栏），即使设置header = NULL，主题样式仍可能残留该导航栏的结构。

解决方法 #

方法1：通过CSS隐藏绿色导航栏 #

在tags$head中添加自定义CSS，直接隐藏shinydashboard的顶部导航栏元素：

tags$head(
  tags$style(".navbar {margin-bottom: 0px;}"),
  tags$style(".container-fluid {padding-right: 0px; padding-left: 0px;}"),
  # 新增该行CSS，隐藏shinydashboard的导航栏
  tags$style(".main-header {display: none;}")
)

方法2：重构UI结构（推荐） #

既然不需要shinydashboard的顶部导航栏，直接将dashboardSidebar和dashboardBody放入tabPanel，无需用dashboardPage包裹：

tabPanel("Toolbox", icon = icon("wrench"),
  shiny::fluidRow(
    shinydashboard::dashboardSidebar(
      width = 300 ,
      shinydashboard::sidebarMenu(
        shinydashboard::menuItem(
          "Tools",
          tabName = "tools_app",
          icon = icon("wrench"),
          shinydashboard::menuSubItem("Gene Expression/Signature/Pathways", tabName = "gene_app", icon = icon("chart-line")),
          shinydashboard::menuSubItem("Genomic", tabName = "genomic_app", icon = icon("universal-access")),
          shinydashboard::menuSubItem("Epigenetics", tabName = "epi_app", icon = icon("chart-bar")),
          shinydashboard::menuSubItem("Immune-oncology", tabName = "io_app", icon = icon("heartbeat")),
          shinydashboard::menuSubItem("Pharmacology", tabName = "pharm_app", icon = icon("plus-square")),
          shinydashboard::menuSubItem("Cell line Selection", tabName = "cell_app", icon = icon("sellcast")),
          shinydashboard::menuSubItem("Mouse", tabName = "mouse_app", icon = icon("paw")),
          shinydashboard::menuSubItem("Haem Oncology", tabName = "hemebase_app", icon = icon("h-square")),
          shinydashboard::menuSubItem("Multiomics", tabName = "multiomics_app", icon = icon("list")),
          shinydashboard::menuSubItem("Other", tabName = "other_app", icon = icon("option-horizontal", lib = "glyphicon"))
        )
      )
    ),
    shinydashboard::dashboardBody(
      shinydashboard::tabItems(
        shinydashboard::tabItem("tools_app", mod_tools_path_ui("tools_path_ui_1")),
        shinydashboard::tabItem("gene_app",mod_gene_expressions_sign_path_ui("gene_expression_sign_path_ui_1")),
        shinydashboard::tabItem("genomic_app", mod_genomic_ui("genomic_ui_1")),
        shinydashboard::tabItem("epi_app", mod_epi_ui("epi_ui_1")),
        shinydashboard::tabItem("io_app", mod_io_ui("io_ui_1")),
        shinydashboard::tabItem("pharm_app", mod_pharm_ui("pharm_ui_1")),
        shinydashboard::tabItem("cell_app", mod_cell_ui("cell_ui_1")),
        shinydashboard::tabItem("mouse_app", mod_mouse_ui("mouse_ui_1")),
        shinydashboard::tabItem("hemebase_app", mod_hemebase_ui("hemebase_ui_1")),
        shinydashboard::tabItem("multiomics_app", mod_multiomics_ui("multiomics_ui_1")),
        shinydashboard::tabItem("other_app", mod_other_ui("other_ui_1"))
      )
    )
  )
)

方案选择 #

• 若只想快速隐藏多余导航栏，方法1操作简单；
• 若想从结构上避免冗余元素生成，方法2更规范，能优化页面DOM结构。

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