如何创建含多行居中标题与居中锚点的Shiny导航栏？

1. 实现多行标题（主标题+副标题） #

默认navbarPage()的title参数仅支持单行文本，直接用HTML()函数嵌套HTML标签就能实现多行效果，还能自定义样式调整排版：

navbarPage(
  title = HTML('<div>
                  <h3 style="margin: 0; font-size: 20px;">我的Shiny应用</h3>
                  <p style="margin: 0; font-size: 12px; color: #888;">专注数据可视化</p>
               </div>'),
  # 后续tab或菜单配置
)

用<div>包裹主副标题，通过内联style控制间距、字体大小和颜色，避免默认样式带来的多余留白。

2. 让导航栏整体居中 #

默认导航栏是左对齐的，添加自定义CSS就能实现居中布局，把这段代码放到fluidPage()内的tags$head()中：

tags$head(
  tags$style(HTML('
    .navbar-header {
      width: 100%;
      text-align: center;
    }
    .navbar-brand {
      float: none;
      display: inline-block;
      padding-top: 8px;
    }
    .navbar-nav {
      float: none;
      text-align: center;
    }
    .navbar-nav > li {
      display: inline-block;
      float: none;
    }
  '))
)

这段CSS会把导航栏标题、菜单项都调整为居中对齐，同时修正元素的浮动属性，保证布局正常显示。

3. 添加锚点跳转至页面指定区域 #

分两步实现锚点跳转：

• 第一步：给页面需要跳转的区域设置唯一id标记：

tabPanel("详细内容",
         div(id = "section1",
             h2("第一部分：数据概览"),
             p("这里是第一部分内容...")
         ),
         div(id = "section2",
             h2("第二部分：深度分析"),
             p("这里是第二部分内容...")
         )
)

• 第二步：在导航栏菜单里添加跳转链接，用actionLink配合onclick事件即可：

navbarMenu("内容导航",
           actionLink("link_sec1", "第一部分", onclick = "window.location.hash='#section1';"),
           actionLink("link_sec2", "第二部分", onclick = "window.location.hash='#section2';")
)

点击这些菜单项，页面就会自动滚动到对应id的区域。

完整可运行示例 #

把以上所有部分整合起来，直接运行这段代码就能看到完整效果：

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML('
      .navbar-header {
        width: 100%;
        text-align: center;
      }
      .navbar-brand {
        float: none;
        display: inline-block;
        padding-top: 8px;
      }
      .navbar-nav {
        float: none;
        text-align: center;
      }
      .navbar-nav > li {
        display: inline-block;
        float: none;
      }
    '))
  ),
  navbarPage(
    title = HTML('<div>
                    <h3 style="margin: 0; font-size: 20px;">我的Shiny应用</h3>
                    <p style="margin: 0; font-size: 12px; color: #888;">专注数据可视化</p>
                 </div>'),
    tabPanel("首页",
             p("这是首页内容")
    ),
    navbarMenu("内容导航",
               actionLink("link_sec1", "第一部分", onclick = "window.location.hash='#section1';"),
               actionLink("link_sec2", "第二部分", onclick = "window.location.hash='#section2';")
    ),
    tabPanel("详细内容",
             div(id = "section1",
                 h2("第一部分：数据概览"),
                 p("这里是第一部分的详细内容..."),
                 # 加空行制造滚动空间，方便测试锚点跳转
                 br(), br(), br(), br(), br(), br(),
                 br(), br(), br(), br(), br(), br()
             ),
             div(id = "section2",
                 h2("第二部分：深度分析"),
                 p("这里是第二部分的详细内容...")
             )
    )
  )
)

server <- function(input, output) {
  # 无需额外服务器逻辑
}

shinyApp(ui, server)

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