如何在Shiny应用的导航栏右侧添加第二张图片

你原有的title参数确实只会渲染在导航栏左侧的品牌位，没法直接控制右侧区域，利用Shiny依赖的Bootstrap导航栏原生布局规则，不用额外引入复杂包，只需要加几行标签就能实现需求。

具体修改方法 #

Bootstrap导航栏原生支持将指定元素浮动到最右侧，你只需要在navbarPage()的所有tabPanel()之后，新增一个带navbar-right类的li标签包裹你的第二张图片即可，框架会自动把这个元素推到导航栏最末端。

修改后完整代码示例 #

shinyUI(fluidPage(
  useShinyjs(),
  shinyjs::hidden(div(
    id = "application",
    navbarPage(
      # 原有左侧标题和第一张图，可自行调整图片边距、高度适配导航栏
      title = div(
        img(src="img_1.png", filetype="image/png", style = "height:30px; margin-right:6px;"), 
        "Indicators"
      ),
      id = "tabs",
      tabPanel("Admin", ...), # 原代码漏了tabPanel之间的逗号，这里补上
      tabPanel("User", ...),
      # 新增：导航栏最右侧的第二张图
      tags$li(
        class = "navbar-text navbar-right",
        style = "margin-right:15px;", # 控制图片和导航栏右边缘的距离
        img(src = "img_2.png", style = "height:30px;") # 高度和左侧logo对齐即可
      )
    )
  ))
))

调整说明 #

• 你可以根据实际导航栏高度，修改两个img标签里的height参数，保证图片和导航栏对齐不溢出
• 如果你的项目升级用了Bootstrap 5版本的Shiny模板，只需要把tags$li里的navbar-right类名替换成ms-auto就能实现同样的右浮动效果
• 这个写法不会影响原有tab切换、shinyjs的显隐逻辑，和你现有代码完全兼容

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