Shiny navbarPage生成未定义多余li标签问题排查与解决求助

原因分析 #

你看到的多余空<li>标签，是因为在navbarPage中直接传入了非tabPanel类型的元素（比如tags$head、useShinyalert()、useShinyjs()）。Shiny的navbarPage会将所有直接子元素默认视为导航栏的标签页（tab），这些非tab元素无法被正确渲染为有效标签，就变成了空的<li>项。

修复方法 #

把这些非tabPanel的元素放到navbarPage的header参数中，而不是直接作为子元素传递。修改后的UI代码如下：

ui <- navbarPage(
  title = "app with shiny",
  windowTitle = "app with shiny",
  id = "top-bar-nav-panel",  
  theme = shinytheme("lumen"),
  # 将非tab元素放入header参数
  header = tagList(
    tags$head(
      tags$link(rel = "stylesheet", type = "text/css", href = "css/general.css"),
      tags$link(rel = "stylesheet", type = "text/css", href = "css/space.css"),
      tags$link(rel = "stylesheet", type = "text/css", href = "css/button.css"),
      tags$script(src = "js/console.js")
    ),
    useShinyalert(), 
    useShinyjs()
  ),
  selected = "App",
  tabPanel("App", icon = icon("rocket"), # code here),
  tabPanel("Guide", icon = icon("book"), # code here),
  tabPanel("Team", icon = icon("users"), # code here)
)

补充说明 #

• header参数专门用于放置需要在navbarPage内部加载的资源、脚本或其他非标签页元素，不会被Shiny识别为导航标签。
• 原代码中tags$head最后一个元素后的多余逗号已移除，避免潜在语法问题。

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