如何为ShinyApp设置可横向滚动的navset导航栏？

核心思路 #

利用Bootstrap原生的flex布局属性，通过少量自定义CSS修改导航容器的行为，让导航面板强制单行排列并支持横向滚动，完全基于Shiny/bslib原生组件实现，无需插入大量冗余HTML。

基础实现（适配page_fluid） #

以下代码直接实现单行滚动的导航面板，保留原生navset_tab/navset_pill的交互逻辑：

library(shiny)
library(bslib)

ui <- page_fluid(
  # 自定义CSS，仅作用于目标导航容器
  tags$style(
    ".scrollable-nav .nav {
      flex-wrap: nowrap; /* 禁止换行 */
      overflow-x: auto; /* 超出部分显示横向滚动条 */
      padding-bottom: 0.5rem; /* 给滚动条预留空间，避免遮挡面板 */
      scroll-behavior: smooth; /* 可选：开启平滑滚动 */
    }
    .scrollable-nav .nav-item {
      flex-shrink: 0; /* 防止面板被压缩变形 */
    }"
  ),
  
  # 用自定义类包裹导航组件
  div(class = "scrollable-nav",
      navset_tab(
        nav_panel("用户管理", "用户列表与权限配置"),
        nav_panel("数据概览", "核心指标可视化"),
        nav_panel("报表生成", "自定义报表导出"),
        nav_panel("系统设置", "参数配置与日志"),
        nav_panel("API接口", "接口文档与调试"),
        nav_panel("帮助中心", "使用指南与FAQ"),
        nav_panel("版本更新", "更新日志与说明"),
        nav_panel("反馈收集", "用户意见提交"),
        nav_panel("权限审计", "操作日志查询"),
        nav_panel("数据备份", "自动备份设置")
      )
  )
)

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

shinyApp(ui, server)

可选：添加滚动箭头（非hacky实现） #

如果需要更直观的滚动控制按钮，可结合少量JS实现，同样不破坏原生结构：

ui <- page_fluid(
  tags$style(
    ".scrollable-nav-container {
      position: relative; /* 为箭头按钮提供定位基准 */
    }
    .scrollable-nav .nav {
      flex-wrap: nowrap;
      overflow-x: auto;
      padding: 0 2.5rem; /* 给左右箭头预留空间 */
      scroll-behavior: smooth;
    }
    .scrollable-nav .nav-item {
      flex-shrink: 0;
    }
    .scroll-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
    }
    .scroll-left { left: 0.5rem; }
    .scroll-right { right: 0.5rem; }"
  ),
  
  div(class = "scrollable-nav-container",
      # 左右滚动按钮
      actionButton("scroll_left", "←", class = "scroll-btn scroll-left btn-sm"),
      actionButton("scroll_right", "→", class = "scroll-btn scroll-right btn-sm"),
      
      div(class = "scrollable-nav",
          navset_tab(
            nav_panel("用户管理", "用户列表与权限配置"),
            nav_panel("数据概览", "核心指标可视化"),
            nav_panel("报表生成", "自定义报表导出"),
            nav_panel("系统设置", "参数配置与日志"),
            nav_panel("API接口", "接口文档与调试"),
            nav_panel("帮助中心", "使用指南与FAQ"),
            nav_panel("版本更新", "更新日志与说明"),
            nav_panel("反馈收集", "用户意见提交"),
            nav_panel("权限审计", "操作日志查询"),
            nav_panel("数据备份", "自动备份设置")
          )
      )
  ),
  
  # 滚动控制JS
  tags$script(
    '
    $("#scroll_left").click(function() {
      $(".scrollable-nav .nav").scrollLeft($(".scrollable-nav .nav").scrollLeft() - 220);
    });
    $("#scroll_right").click(function() {
      $(".scrollable-nav .nav").scrollLeft($(".scrollable-nav .nav").scrollLeft() + 220);
    });
    '
  )
)

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

shinyApp(ui, server)

适配说明 #

• 支持navset_tab/navset_pill等所有基于Bootstrap .nav 类的导航组件，替换组件类型无需修改CSS。
• 完全适配page_fluid布局，导航容器会自动继承父容器的宽度，响应式场景下依然生效。
• 无侵入式实现：仅通过自定义类和CSS修改目标导航的行为，不会影响其他页面组件。

内容的提问来源于stack exchange，提问作者A.Arrigo