Make sidebar resizeable

[royfrancis]

How to make the sidebar width be adjustable by the user?

I have this dummy app to play with.

Click for full code

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Histogram demo",
  sidebar = sidebar(
    sliderInput(
      "n",
      "Number of observations",
      min = 10,
      max = 1000,
      value = 100,
      step = 10
    )
  ),
  fillable = TRUE,
  plotOutput("hist")
)

server <- function(input, output, session) {
  output$hist <- renderPlot({
    hist(
      rnorm(input$n),
      col = "#1f76b4",
      border = "white",
      main = NULL,
      xlab = "Value"
    )
  })
}

shinyApp(ui, server)

I have added one line of css which looks like it could work.

.sidebar { 
  resize: horizontal; 
}

Click for full code

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Histogram demo",
  tags$style(".sidebar { resize: horizontal; }"),
  sidebar = sidebar(
    sliderInput(
      "n",
      "Number of observations",
      min = 10,
      max = 1000,
      value = 100,
      step = 10
    )
  ),
  fillable = TRUE,
  plotOutput("hist")
)

server <- function(input, output, session) {
  output$hist <- renderPlot({
    hist(
      rnorm(input$n),
      col = "#1f76b4",
      border = "white",
      main = NULL,
      xlab = "Value"
    )
  })
}

shinyApp(ui, server)

But not really. The sidebar is technically resizeable, but the content on the right doesn't resize and the collapse button is fixed as well.

resize.mov

What is the best way to do this? Personally, I think the ability to adjust the sidebar width by the user should be the default. This should give the user more flexibility.

Session

─ Session info ──────────────────────────────────────────────────────────────────────────────────────────────────
 setting  value
 version  R version 4.5.2 (2025-10-31)
 os       macOS Tahoe 26.1
 system   aarch64, darwin20.0.0
 ui       unknown
 language (EN)
 collate  en_GB.UTF-8
 ctype    en_GB.UTF-8

─ Packages ──────────────────────────────────────────────────────────────────────────────────────────────────────
 package     * version date (UTC) lib source
 bslib       * 0.9.0   2025-01-30 [1] CRAN (R 4.5.1)
 cachem        1.1.0   2024-05-16 [1] CRAN (R 4.5.1)
 cli           3.6.5   2025-04-23 [1] CRAN (R 4.5.1)
 devtools      2.4.6   2025-10-03 [1] CRAN (R 4.5.1)
 digest        0.6.38  2025-11-12 [1] CRAN (R 4.5.2)
 ellipsis      0.3.2   2021-04-29 [1] CRAN (R 4.5.1)
 fastmap       1.2.0   2024-05-15 [1] CRAN (R 4.5.1)
 fs            1.6.6   2025-04-12 [1] CRAN (R 4.5.1)
 glue          1.8.0   2024-09-30 [1] CRAN (R 4.5.1)
 htmltools     0.5.8.1 2024-04-04 [1] CRAN (R 4.5.1)
 jquerylib     0.1.4   2021-04-26 [1] CRAN (R 4.5.1)
 jsonlite      2.0.0   2025-03-27 [1] CRAN (R 4.5.1)
 lifecycle     1.0.4   2023-11-07 [1] CRAN (R 4.5.1)
 magrittr      2.0.4   2025-09-12 [1] CRAN (R 4.5.1)
 memoise       2.0.1   2021-11-26 [1] CRAN (R 4.5.1)
 pkgbuild      1.4.8   2025-05-26 [1] CRAN (R 4.5.1)
 pkgload       1.4.1   2025-09-23 [1] CRAN (R 4.5.1)
 purrr         1.2.0   2025-11-04 [1] CRAN (R 4.5.2)
 R6            2.6.1   2025-02-15 [1] CRAN (R 4.5.1)
 remotes       2.5.0   2024-03-17 [1] CRAN (R 4.5.1)
 rlang         1.1.6   2025-04-11 [1] CRAN (R 4.5.1)
 sass          0.4.10  2025-04-11 [1] CRAN (R 4.5.1)
 sessioninfo   1.2.3   2025-02-05 [1] CRAN (R 4.5.1)
 usethis       3.2.1   2025-09-06 [1] CRAN (R 4.5.1)
 vctrs         0.6.5   2023-12-01 [1] CRAN (R 4.5.1)

[gadenbuie]

Good news! I implemented this feature earlier this year and it'll be in the next bslib release. Try using bslib from GitHub and sidebars are all resizable by default. (#1217)

[avila]

Hi, is there a way of disabling the ability to resize the sidebar? In general I find it to be a great feature, but in a current use case with 2 sidebars, making the secondary sidebar also resizeable does not improve the user experience while it can make the app look strange. A toggle resizable = FALSE would be great IMHO.

[gadenbuie]

I considered this while working on #1217 and decided against it at the time to avoid over complicating the feature. I'd be happy to reconsider though. Could you please open an issue with a small reproducible app and a description of your use case where usability is reduced by resizable sidebars?

[daattali]

@avila feel free to see the discussion/my proposed solution #1294 (comment)

[toomish]

Found working fix:

.bslib-sidebar-resize-handle {
        display: none !important;
}

For example:

library(shiny)
library(bslib)

ui <- page_sidebar(
    title = "test dashboard",
    sidebar = sidebar(
        open = "always",
        actionButton("push", "push me")
    ),
    textOutput("text"),

    tags$head(
        tags$style(HTML("
            .bslib-sidebar-resize-handle {
                    display: none !important;
            }
        "))
    )
)

server <- function(input, output) {
    n <- reactiveVal(0)
    observeEvent(input$push, n(n() + 1))
    output$text <- renderText(sprintf("hello world %d", n()))
}

shinyApp(ui, server)